为什么路径不适合 SVG 视图框？

Question

预期行为： 仅适合 24 x 24 视图框区域的图标。

实际行为： svg 标签占用了正确的 24 x 24 区域，但路径元素未包含在 24 x 24 区域中。

我怎样才能将路径限制在 24 x 24 区域而不超过？目前这是我的 svg 标签的样子。

<a href="#">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
       <path d="M15.99 2a13.99 13.99 0 0 0-5.1 27.03c-.13-1.11-.23-2.81.05-4.02l1.64-6.96s-.41-.84-.41-2.07c0-1.95 1.13-3.4 2.53-3.4 1.2 0 1.77.9 1.77 1.97 0 1.2-.76 2.99-1.16 4.66-.33 1.39.7 2.53 2.07 2.53 2.49 0 4.4-2.63 4.4-6.4 0-3.35-2.41-5.69-5.85-5.69a6.05 6.05 0 0 0-6.32 6.07c0 1.2.46 2.49 1.04 3.19.12.14.13.26.09.4l-.39 1.59c-.06.25-.21.31-.47.18-1.73-.83-2.81-3.39-2.81-5.44 0-4.41 3.2-8.47 9.25-8.47 4.85 0 8.63 3.46 8.63 8.09 0 4.83-3.04 8.71-7.26 8.71-1.42 0-2.75-.74-3.2-1.61l-.88 3.33a15 15 0 0 1-1.74 3.67A13.97 13.97 0 0 0 30 16.01 14.02 14.02 0 0 0 15.99 2z">
       </path>
    </svg>
</a>

Answer 1

问题出在您的 SVG 路径上。它在视图框外流血。这是它在 Illustrator 中的样子：

这是在 illustrator 中编辑路径以将其包含到视图框之后：

a {
  display: inline-block;
}

<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path d="M12 0C5.4 0 0 5.3 0 11.9c0 5 3 9.4 7.6 11.2-.1-1-.2-2.4 0-3.4l1.4-6s-.4-.7-.4-1.8c0-1.7 1-2.9 2.2-2.9 1 0 1.5.8 1.5 1.7 0 1-.7 2.6-1 4-.3 1.2.6 2.2 1.8 2.2 2.1 0 3.8-2.3 3.8-5.5 0-2.9-2.1-4.9-5-4.9-2.9-.1-5.3 2.1-5.4 4.9v.3c0 1 .4 2.1.9 2.7.1.1.1.2.1.3l-.3 1.4c-.1.2-.2.3-.4.2-1.5-.7-2.4-2.9-2.4-4.7 0-3.8 2.7-7.3 7.9-7.3 4.2 0 7.4 3 7.4 6.9 0 4.1-2.6 7.5-6.2 7.5-1.2 0-2.4-.6-2.7-1.4l-.8 3c-.4 1.1-.9 2.2-1.5 3.1 6.3 2 13-1.6 15-7.9.4-1.2.5-2.4.5-3.6C24 5.4 18.6 0 12 0z"/>
      </path>
    </svg>
</a>

此外，将 display: inline-block 添加到您的锚标记允许 SVG 占据它的 space。

Answer 2

请记住，viewBox 不必与您的尺寸相匹配，因此请调整您的 viewBox - 这就是它的用途！下面的 viewBox 设置似乎有效。（我放大了SVG尺寸，并添加了1px的红色边框来显示效果）。

svg {
border: 1px solid red;
}

  <svg xmlns="http://www.w3.org/2000/svg" width="240px" height="240px" viewBox="1.6 2 28.73 27.99">
       <path d="M15.99 2a13.99 13.99 0 0 0-5.1 27.03c-.13-1.11-.23-2.81.05-4.02l1.64-6.96s-.41-.84-.41-2.07c0-1.95 1.13-3.4 2.53-3.4 1.2 0 1.77.9 1.77 1.97 0 1.2-.76 2.99-1.16 4.66-.33 1.39.7 2.53 2.07 2.53 2.49 0 4.4-2.63 4.4-6.4 0-3.35-2.41-5.69-5.85-5.69a6.05 6.05 0 0 0-6.32 6.07c0 1.2.46 2.49 1.04 3.19.12.14.13.26.09.4l-.39 1.59c-.06.25-.21.31-.47.18-1.73-.83-2.81-3.39-2.81-5.44 0-4.41 3.2-8.47 9.25-8.47 4.85 0 8.63 3.46 8.63 8.09 0 4.83-3.04 8.71-7.26 8.71-1.42 0-2.75-.74-3.2-1.61l-.88 3.33a15 15 0 0 1-1.74 3.67A13.97 13.97 0 0 0 30 16.01 14.02 14.02 0 0 0 15.99 2z">
       </path>
    </svg>

为什么路径不适合 SVG 视图框？

Why does path not fit inside SVG viewbox?

html

javascript

svg

viewbox

web