17

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

有什么办法可以删除左右两侧的“填充”？有关系ViewBox吗？

4

4 回答 4

16

有两种可能会导致这种情况，具体取决于您的 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*，但是因为它必须保持它的比率并且它不能增长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 的一些理解，因为它们是一个非常有用的工具！

于 2017-04-10T11:33:57.100 回答
12

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

于 2013-01-13T02:04:15.600 回答
1

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

于 2021-07-27T10:55:55.007 回答
0

设置 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");
于 2021-06-20T09:32:26.660 回答