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

Question

円を描くSVGグラフィックがあります。CSSでそれを与えるとき、background-colorCSS要素は決して丸くないので、角にのみ表示されると思っていました（はい、はい、border-radius...）-それで、背景色の長方形のボックスに透明な背景の丸いグラフィックを入れました。
しかし、代わりに、次のようになります。

左右の「パディング」を外す方法はありますか？それは何か関係がありViewBoxますか？

Answer 1

SVGがどのように描画されたかによって、これを引き起こす可能性のある2つの可能性があります。

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>

これを削除する方法は、パスの位置を変更するか、別の座標で開始するようにビューボックスを変更することです。ビューボックスの座標を変更することは、ゼロ以外の座標から開始するのが非論理的になるため、理想的な修正ではありません。ビューボックスにシェイプを追加するときは、これを考慮に入れる必要があります。

<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 *成長しようとしますが、比率を維持する必要があり、成長できません。 Yで2*の場合、各方向で1.5*だけ増加します。X方向に残った.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>

SVGは本当に便利なツールなので、これがSVGの理解に役立つことを願っています。

Answer 2

SVGをボックス全体に拡大する場合はpreserveAspectRatio="none"、ルート<svg>要素を配置します。

Answer 3

今日、私は同様の状況に遭遇しました。boxy-svg.comオンラインツールを使用して、 .svgファイルからパディングを削除しました。

Answer 4

viewBoxのサイズを設定した後、preserveAspectRatioをxMinYMinに設定します。

ドキュメントリンク：https ：//developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

d3を使用して、

const width = 600, height = 400;
const svg = d3.select(".svg-element");
svg.attr("viewBox", [0, 0, width, height]);
svg.attr("preserveAspectRatio", "xMinYMin");