1231147 - SVG elements don't support CSS rem units for height/width attributes

Status: RESOLVED DUPLICATE of bug 1383650

(Core :: SVG, defect, P3)

Description

[mathews.kyle]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.71 Safari/537.36

Steps to reproduce:

See http://codepen.io/anon/pen/mVyzyJ

I created an SVG element and set its height with rem units.


Actual results:

Heights set with em works as expected. Heights set with rem don't in Firefox but do in Chrome & Safari.


Expected results:

A height set with rem and em should render identically.

Comment 1

[Boris Zbarsky [:bzbarsky]]

The SVG spec doesn't allow rem units in that attribute value.  We have an explicit comment about that in the code (nsSVGElement.cpp):

1273       // Special case: we don't want <svg> 'width'/'height' mapped into style
1274       // if the attribute value isn't a valid <length> according to SVG (which
1275       // only supports a subset of the CSS <length> values).

Cameron, is the SVG spec planning to change here, do you know?

Comment 2

[Thomas Wisniewski]

This just bit the mobile version of the Bing Fun & Games site. Also, since other browsers support rem width/height already (Chrome, Safari, Edge), I suspect that this ship has already sailed, and that we and the spec should probably change.

Comment 4

[Cameron McCormack (:heycam)]

(In reply to Boris Zbarsky [:bz] (no decent commit message means r-) from comment #1)
> Cameron, is the SVG spec planning to change here, do you know?

The SVG 2 spec allows rem units here, as width="" and height="" are just presentation attributes for those two properties.  At the moment we don't support any units that weren't supported in SVG 1.1 in length-typed presentation attributes (like rem, ch, vw, ...).  The one trick will be to ensure we do the right thing on the SVGLength objects reflecting these values, per https://svgwg.org/svg2-draft/types.html#InterfaceSVGLength.

This ties in to the broader issue of the spec requiring presentation attributes to be parsed using the CSS syntax/parser for the corresponding property, which we haven't done yet.

Comment 5

[yair even or]

Please ho please add support for CH units on SVG elements attributes.

I need to be able to do things like:

<tspan x="0" dx="8ch">DUMMY TEXT</tspan>

This is a simplified example of a quite a complex system with thousands of lines of SVG texts and tspans which carefully requires positioning, and the CH units are a huge life-saving trick for positioning monospaced text in SVG, in a way which lets the who thing be completely dynamic even if font style properties change, which in turn re-position everything.

Comment 6

[Akansh]

Any work around as its difficult to create cross browser addons in such case as chrome extensions support rem for svg but same creates issue with svg on firefox. Facing issue particularly with "rem" unit.

Comment 7

[justinmclaren63]

A work around, depending on your use case, is to define the width and height in your CSS and not inline in the SVG. This allows me to still have dynamically resizing SVG icons using rems.

Comment 8

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 9

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.

Comment 11

[jacborg]

I'm testing rem consistency in all graphic subsytems of recent browsers and would like to pass variables to an SVG element in HTML or to an SVG document in a background-image. Is it possible to add this? the reason is that I'd prefer to encode the proportions of a graphic within the graphic. This way I can set :root font-size to var(--REMS) in the SVG document internals that matches the rest of the HTML document and gives me consistent rendering without having to check the SVG's size.

I can do away with it for simple graphemes. is there a simple work around if the SVG document contains text that must match the font-size of the rest of the HTML document?