Question

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

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

矩形不会在Firefox中翻译，除非我将em作为单位删除。

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/>

目前正在制定transforms in CSS/SVG的新规范，它确实允许翻译单位，请参阅here。

Answer 2

不幸的是，不是;

规范explicitly allow for user units - 对应于CSS单位，默认为像素单位（否则未指定） - 应用于坐标，而转换仅用于浮点数，如{{{ 3}}

Answer 3

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

使用jQuery：

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

SVG以em为单位翻译？

3 个答案: