有没有办法使用 em 作为 SVG 翻译的单位?如在
<rect height="10em" width="10em" transform="translate(0em, 10em)"
style="fill:none;stroke-width:3;stroke:black/>
除非我将 em 作为单位删除,否则矩形不会在 Firefox 中翻译。
有没有办法使用 em 作为 SVG 翻译的单位?如在
<rect height="10em" width="10em" transform="translate(0em, 10em)"
style="fill:none;stroke-width:3;stroke:black/>
除非我将 em 作为单位删除,否则矩形不会在 Firefox 中翻译。
如果您将要翻译的元素包装在新的坐标系中,您可以这样做:
<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 单位并在未指定时默认为像素单位)应用于坐标,而转换仅用于SVGMatrix 接口定义的浮点数。
如果您使用 javascript 创建矩形,您可以做的另一件事是检索父元素的字体大小并将 em 值转换为 px。
使用 jQuery:
var one_em = +$("#parent").css("font-size").replace("px", "");
$("#parent").append("<rect transform=translate(0," + (10*one_em) + ") .../>")