文章/答案/技术大牛

发布

社区首页 >问答首页 >SVG中无法解释的额外垂直空间

问SVG中无法解释的额外垂直空间
EN

Stack Overflow用户

提问于 2019-11-14 17:05:56

回答 2查看 146关注 0票数 0

我在一个站点上使用内联SVG，但有些SVG的大小不同，我遇到了问题。下面是一个示例CodePen (代码也在下面)。您可以看到，第一个和第二个SVG具有完全相同的高度设置和宽度是自动的，所以我希望它们填充框的高度，并调整它们的宽度以匹配。但是，如果您检查内部<path>元素与包含的<svg>元素相比，您会发现SVG周围有某种填充，这就是大小不同的原因。

多余的填充物是什么?我怎样才能摆脱它？

div {
  height: 50px;
  width: 50px;
  border: 1px red solid;
}

svg {
  height: 100%;
  width: auto;
}

<div>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4h-3.5z"></path>
  </svg>
</div>

<div>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path>
  </svg>
</div>

html

css

svg

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-11-14 17:40:30

这通常是svg的工作方式。您可以认为svg类似于画布，容器元素<div>是它的框架。<path>类似于画布上的绘图，您的绘图方式由名为d的属性指定，例如，M6 19移动到6px (水平)和19 6px(垂直)位置。

svg路径

手动调整path以适应svg(画布)是相当困难的。我建议用矢量图形工具如插画或调整svg元素的viewBox来调整它(就像在画布上移动/调整所有绘图)

票数 1

Stack Overflow用户

发布于 2019-11-14 18:00:27

SVG元素是一种画布，所有内部元素都处于绝对位置。viewbox属性是在svg中定义坐标系统的大小。

因此，path绝对定位在viewbox坐标系中。如果希望路径填充整个视图框，则需要修改路径本身的坐标。

如果要用矩形简化此示例，则如下所示：

// fill the entire viewbox
<svg viewbox="0 0 24 24">
  <rect x="0" y="0" width="24" height="24" />
</svg>

与你所说的“填充”相比：

// give 2px around the rectangle
<svg viewbox="0 0 24 24">
  <rect x="2" y="2" width="22" height="22" />
</svg>

对于像这样复杂的路径，在像草图或插画这样的应用程序中更容易操纵它们。

我希望我的例子能帮助你解决问题。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58862229

复制

相似问题

问SVG中无法解释的额外垂直空间
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG中无法解释的额外垂直空间EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG中无法解释的额外垂直空间
EN