SVG以em为单位翻译？

Question

有没有办法使用em作为SVG翻译的单位？如在

<rect height="10em" width="10em" transform="translate(0em, 10em)"
 style="fill:none;stroke-width:3;stroke:black/>

除非我将em作为单位删除,否则矩形不会在Firefox中翻译.

Answer 1

如果在新坐标系中包装要转换的元素,则可以执行此操作:

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

如果您只需要翻译并使用具有x和y属性(或等效属性)的元素,则另一个选项是使用它们,如下所示:

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

目前正在开发一种新的CSS/SVG变换规范,它确实允许单位翻译,见这里.

Answer 2

不幸的是,没有;

规范明确允许用户单元 - 对应于CSS单元,默认为像素单元(否则未指定) - 应用于坐标,而转换意味着与SVGMatrix接口定义的浮点数一起使用.