Question

我正在使用FontAwesome的嵌入式SVG。图像本身可以正常工作，但是由于某些原因，我不能完全理解path元素不能填充SVG-SVG标签本身似乎周围有填充物。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" width="75px" height="75px"><path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"/></svg>

如何获取路径元素以填充整个SVG？（为什么默认情况下不会发生这种情况？）

Answer 1

svg {
  border: 1px solid red;
  }

<html>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="76 96 128 322" width="56px" height="75px"><path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"/></svg>
  </body>
</html>

我认为这更接近您想要的。使用视图框和width / height属性“裁剪”图像（您可能必须编辑以上属性才能获得所需的图像，但这只是一个开始）。我认为这不是默认行为，因此图标具有自然的余量，并且不会与周围的文本发生冲突。

如何获得SVG的路径来填充整个图像？

1 个答案: