SVGから「パディング」を削除しますか？

Question

私は円を描くSVGグラフィックを持っています。私はbackground-color CSSでそれを与えるとき、私は（はいはい、border-radius ...）CSS要素が丸いことはありませんので、それが唯一の隅に表示することが予想される - ので、私は長方形の箱に透明な背景を持つ円形のグラフィックを置きます背景色。
しかし、その代わりに、それは次のようになります。

は私が左&右側に「詰め物」を取り除くことができる方法はありますか？それはViewBoxと関係がありますか？

Answer 1

SVGをボックス全体に伸ばしたい場合は、ルート<svg>にpreserveAspectRatio="none"と入力してください。

Answer 2

は、あなたのSVGが描画されている方法に応じて、これを引き起こす可能性の二つの可能性があります。

1）SVGにおけるパス/円は、左側に位置合わせされていない位置から開始することができます。

ポイント0,0からのグリッドのように、幅が64、高さが32で、サークルに32,16と16の半径を中心にして指示しました。左と右の詰め物の16点を32点の円ごとに置きます。

<p>No padding with coordinate</p> 
 
<svg style="border: 1px solid red;" 
 
     height="50px" 
 
     viewBox="0 0 32 32" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="16" cy="16" r="16"/> 
 
</svg> 
 
<p>Example above but starting at a coordinate that causes whitespace</p> 
 
<svg style="border: 1px solid red;" 
 
     viewBox="0 0 64 32" 
 
     height="50px" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="32" cy="16" r="16"/> 
 
</svg>

これを削除する方法は、あなたのパスを再配置、またはそれは異なる座標で開始されるように、あなたのビューボックスを変更しようとすることです。 ViewBoxの座標を変更することは理想的な方法ではありません。ゼロ以外の座標で開始するのは非理想的なので、ビューボックスに他の図形を追加する際には、これを考慮に入れてください。

<p>Changing the viewbox to start at a different coordinate</p> 
 
<svg style="border: 1px solid red;" 
 
     height="50px" 
 
     viewBox="50 50 100 100" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="100" cy="100" r="50"/> 
 
</svg> 
 
<p>Changing the 'path' so that it doesn't leave padding</p> 
 
<svg style="border: 1px solid red;" 
 
     height="50px" 
 
     viewBox="0 0 100 100" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="50" cy="50" r="50"/> 
 
</svg>

2）あなたのSVGを均一にスケールするように言われました。

この2番目のオプションは、SVGは、スケールアップ時にその寸法の寸法に同じ比率を維持するあなたのSVGに描かれたすべてのパスを意味します。

は、あなたが円を持っている想像し、それはきちんとなしパディングと子供に合うように、あなたのSVGは設計されています。今度はSVGボックスをX軸で2倍、Y軸で1.5倍にスケーリングした場合、円はX軸方向に2倍になりますが、比を維持して成長できないため2 * Yの場合、各方向に1.5 *だけ増加します。 X方向の左上0.5 *の場合は、空白を追加するだけです。

<p>Unscaled</p> 
 
<svg style="border: 1px solid red" 
 
     height="100px" 
 
     width="100px" 
 
     viewBox="0 0 32 32" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="16" cy="16" r="16"/> 
 
</svg> 
 
<p>Above circle scaled at an uneven ratio</p> 
 
<svg style="border: 1px solid red" 
 
     height="50px" 
 
     width="100px" 
 
     viewBox="0 0 32 32" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="16" cy="16" r="16"/> 
 
</svg>

@heycamは、この比率のスケーリングがオフにされるのを可能にするためにSVG要素を設定することができ、これを変更するには、上記述べたように。これは、属性 "preserveAspectRatio"を使用し、それを "none"に設定して行います。

<svg style="border: 1px solid red" 
 
     height="50px" 
 
     width="100px" 
 
     viewBox="0 0 32 32" 
 
     preserveAspectRatio="none" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="16" cy="16" r="16"/> 
 
</svg>

彼らは本当に便利なツールだとうまくいけば、これは、SVGsのご理解のいくつかを助け！