javascript - 定义 viewBox 时 SVG 的宽度不正确

Question

我试图了解为什么我的 SVG 图标未正确呈现。如果 viewBox 属性与 width\height 一样使用，则图标比我的 SVG 元素事件小一点。

感谢您的帮助

如您所见，图标比整个 SVG 元素小一点。

我的 SVG 代码。

<svg width="24" height="25" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg">
  <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title>
  <g fill="#9FA09F" fill-rule="evenodd">
    <path d="M7 13.684a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0 1a7 7 0 1 1 0-14 7 7 0 0 1 0 14z" />
    <path d="M7 7.684a2 2 0 1 0 .001-4 2 2 0 0 0-.001 4zM7 8.684c3 0 3.566 2.116 3.566 2.116.24.488-.019.884-.563.884H3.997c-.55 0-.82-.418-.553-.9 0 0 .556-2.1 3.556-2.1z" />
  </g>
</svg>

Answer 1

查看端口

-视口(viewport)是<svg> 的可见区域.要设置视口(viewport)，我们可以使用属性 height和 width与 <svg> .

查看框

-它允许我们设置我们的图形和拉伸(stretch)以适应容器。 viewbox拥有四个属性mix-x , min-y , width , height .和min值表示 viewBox 从图像中的哪个点开始应该开始了。

示例

如果我们设置视口(viewport)和viewbox , width和 height相同的。那么viewbox覆盖整个图像。

解决方案

-对于您的问题，您需要减小 viewbox 的大小width一个 height属性(property)。但是由于您的图像尺寸很小，您还需要设置 width和`得到所需结果的高度。

JsFiddle Solution with different example