単位svgの幅/高さの単位

Question

このコードはsvgで、青色の長方形が描画されています。

<svg> 
 
    <rect width="50" height="200" style="fill:blue"/> 
 
</svg>

サイズが変化青い長方形は、ビューポートに依存します。 widthプロパティのユニット50は、単純なピクセルではありません。それ以外の場合は、異なる画面で同じになっていました。

このユニットの意味はなんですか？

Answer 1

測定単位はpixelsです。 svg要素のベクトル描画の動作により、正しい結果が得られません。

---

あなたのsvgに高さと幅を指定すると、矩形が期待どおりに動作することがわかります。

<svg width="400" height="400"> 
 
    <rect width="50" height="200" style="fill:blue"/> 
 
</svg>

SVGのサイズは、それに含まれるすべてのコンテンツの最大範囲であるべきです。 矩形だけが内部にある場合は、含まれるsvgを希望のサイズにして、長方形に高さ/幅100％を使用します。上記のコードで

<svg width="50" height="200"> 
 
    <rect width="100%" height="100%" style="fill:blue"/> 
 
</svg>