svg - SVGはemを単位として変換しますか?

Question

SVG 翻訳の単位として em を使用する方法はありますか? のように

<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 で rect を作成している場合にできるもう 1 つの方法は、親要素のフォント サイズを取得し、em 値を px に変換することです。

jQuery の使用:

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