SVG translate with em as unit?

svg

Solution

You can sort of do this if you wrap the element(s) you want to translate in a new coordinate system:

<svg>
  <svg width="1em" height="1em" overflow="visible" viewBox="0 0 1 1">
    <rect height="10" width="10" transform="translate(0, 10)" .../>
  </svg>
</svg>

Another option if you only need translations and use elements that have x and y attributes (or equivalent) is to use those instead, like this:

<rect x="0" y="10em" height="10em" width="10em" 
 style="fill:none;stroke-width:3;stroke:black/>

A new specification for transforms in CSS/SVG is currently being worked on, and it will indeed allow units in translations, see here.

Problem

Is there a way to use em as unit for SVG translations? As in ``` <rect height="10em" width="10em" transform="translate(0em, 10em)" style="fill:none;stroke-width:3;stroke:black/> ``` The rectangle does not translate in Firefox, unless I remove the em as unit.

Original source