从SVG中删除“填充”？

Question

我有一个绘制圆圈的SVG图形。当我用CSS给它一个background-color时，我希望它只出现在角落里，因为CSS元素永远不会是圆的（是的，border-radius ...） - 所以我放了一个圆形图形背景颜色长方形透明背景 但相反，它看起来像这样：

有什么方法可以删除左边的“填充”和右边？它与ViewBox有关吗？​​

Answer 1

根据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已被告知要统一缩放。

第二个选项意味着当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的一些理解，因为它们是一个非常有用的工具！

Answer 2

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

Answer 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");

Answer 4

今天我遇到了类似的情况，我使用 boxy-svg.com 在线工具从 .svg 文件中删除了填充。