为什么路径不适合SVG Viewbox？

发布于 2025-01-22 11:48:57 字数 1256 浏览 3 评论 0原文

图标仅适用于24 x 24 Viewbox的面积。

实际行为： 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>

原文

Expected Behavior:
Icon to fit only the area of the 24 x 24 viewbox.

Actual Behavior:
The svg tag takes up the correct area of 24 x 24 but the path element is not contained inside of the 24 x 24 area.

How would I be able to have the path be constrained to the 24 x 24 area and not go over? Currently this is what my svg tag looks like.

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倚栏听风 2025-01-29 11:48:57

请记住，视图框不必匹配您的尺寸，因此请调整您的视图框 - 这就是它的目的！下面的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>

Remember, the viewBox doesn't have to match your dimensions, so adjust your viewBox - that's what it's there for! The viewBox settings below seems to work. (I scaled up the SVG size and added a 1px border red to show the effect).

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>

回复收藏 0 原文

笑梦风尘 2025-01-29 11:48:57

问题在于您的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>

另外，将显示：inline-block添加到锚标签中，允许SVG占用其空间。

The problem is with your SVG path. It is bleeding outside the view box. This is what it looks like in Illustrator:

This is after editing the path in illustrator to contain it to the view box:

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>

Also, adding display: inline-block to your anchor tag allows the SVG to take up it's space.

回复收藏 0 原文

~没有更多了~