从 SVG 中删除“填充”？答案

【问题标题】：Removing "padding" from SVG?从 SVG 中删除“填充”？
【发布时间】：2012-12-27 07:10:20
【问题描述】：

我有一个画圆的 SVG 图形。当我给它一个带有 CSS 的 background-color 时，我希望它只显示在角落，因为 CSS 元素永远不会是圆形的（是的，是的，border-radius...） - 所以我在其中放置了一个具有透明背景的圆形图形一个带有背景颜色的矩形框。
但相反，它看起来像这样：

有什么办法可以去掉左右两边的“填充”？跟ViewBox有关系吗？

【问题讨论】：

标签： css html svg

【解决方案1】：

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

【讨论】：

【解决方案2】：

有两种可能会导致这种情况，具体取决于您的 SVG 是如何绘制的。

1.) 您在 SVG 中的路径/圆圈可能从未与左侧对齐的位置开始。

把它想象成一个从点 0,0 开始的 Grid，它的宽度为 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 方向上剩下的 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>

希望这有助于您了解 SVG，因为它们是一个非常有用的工具！

【讨论】：

【解决方案3】：

设置 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");

【讨论】：

【解决方案4】：

今天遇到类似情况，我用boxy-svg.com在线工具把.svg文件的padding去掉了。

【讨论】：