svg - 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 接口定义的浮点数。

Answer 3

如果您使用 javascript 创建矩形，您可以做的另一件事是检索父元素的字体大小并将 em 值转换为 px。

使用 jQuery：

var one_em = +$("#parent").css("font-size").replace("px", "");
$("#parent").append("<rect transform=translate(0," + (10*one_em) + ") .../>")