emsでSVGポリゴンをどのようにスケールするのですか？

Question

私は<svg>要素をHTML5ドキュメントに直接埋め込みました。ページのフォントサイズの観点から繰り返し背景パターンをスケールしたいと思います。問題はありません.SVGはCSS単位をサポートしていますので、サイズをemで指定することはできますか？

SVG仕様claims SVGの "coordinatesとlengthsはすべて、ユニット識別子の有無にかかわらず指定できます。"そして、確かに、これらの両方は私が期待していたまさに行います

<rect x='1em' y='2em' width='3em' height='4em' /> 
<circle cx='6em' cy='7em' r='8em' /> 

しかし、多角形（例えば）これは、代わりに1を描くのエラーが発生するような「座標」という言葉の独自のcompletely different definitionを持っていますEMの三角形：

<polygon points='0 0, 0 1em, 1em 0' /> 

Paths同じ方法です - 当然のことながら、彼らはすでに別の目的のために、文字を使用しているからです。

そしてtransformationsなどの「スケール」、「数」、「座標」ではないか、「長さ」を期待するので、これはどちらかの許可されていません（私のブラウザは黙って「変換」属性を無視するようだ）：

<polygon points='0 0, 0 1, 1 0' transform='scale(1em)' /> 

私は1 em三角形を描く方法を理解することもできず、もっと複雑なものはほとんどありません。私はそれを行う合理的な方法を見落としていますか？不合理なことはどうですか？私はあきらめて、代わりに<canvas>要素を使用するか、それはさらに悪化するでしょうか？

Answer 1

内側の<svg>要素にポリゴンをラップして、必要に応じて拡大縮小することができます。 viewBoxは、それに含まれるオブジェクトの座標系を制御し、height属性とwidth属性は、その大きさを制御します。

<svg xmlns="http://www.w3.org/2000/svg"> 
    <svg viewBox="0 0 1 1" height="1em" width="1em" y="7em"> 
     <polygon points='0 0, 0 1, 1 0' /> 
    </svg> 
    <circle cx='6em' cy='7em' r='2em' /> 
</svg> 

Answer 2

任意のアイテムに変換を適用でき、emまたは他のユニットを使用できます。例えば

、これはうまく動作します：

<polygon points='0 0, 0 1, 1 0' transform='scale(2em 1.5em)' />