从 SVG 中删除“填充”？

Question

我有一个绘制圆圈的 SVG 图形。当我用 CSS 给它一个 background-color 时，我希望它只出现在角落里，因为 CSS 元素永远不会是圆的（是的，是的， border-radius …） - 所以我把在具有背景颜色的矩形框中具有透明背景的圆形图形。

但是，它看起来像这样：

有什么办法可以删除左侧和右侧的“填充”？它与 ViewBox 吗？

原文由 Sven 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您希望 SVG 拉伸到整个框，请将 preserveAspectRatio="none" 放在根 <svg> 元素上。

原文由 heycam 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 的坐标不是理想的解决方法，因为从非零坐标开始变得不合逻辑，您必须记住在向 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 已被告知要统一缩放。

第二个选项意味着在 SVG 中绘制的所有路径在 SVG 放大时将保持相同的尺寸比例。

想象一下你有一个圆圈，你的 SVG 被设计成可以整齐地适合孩子们，没有填充。现在我们已经将这个 SVG 框在 X 轴上缩放了 2*，在 Y 轴上缩放了 1.5*，圆将尝试在 X 方向上增长 2*，但是因为它必须保持它的比例并且它不能增长2* 在 Y 中，它只会在每个方向增长 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”并将其设置为“无”来完成的。

 <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 的一些理解，因为它们是一个非常有用的工具！

原文由 David Moores 发布，翻译遵循 CC BY-SA 3.0 许可协议