我不明白如何使用本地 svg 文件

Question

这是 svg https://gist.github.com/Mautriz/8a936e0d1df136459d2c7f133d9b50d9

它在 html 的同一文件夹内的一个名为“test.svg”的文件中

<svg height="400" width="400">
  <use xlink:href="test.svg"></use>
</svg>

我尝试过使用或不使用 xlink，使用相对路径和绝对路径，我缺少什么？

Answer 1

您可以通过多种方式在代码中使用 SVG。在您的特定情况下，您正在尝试使用 SVG Sprites 方法。 <use> 形状必须在页面上的其他地方定义。还要匹配 xlink:href= 和 SVG path 或 symbol id。

关于如何使用SVG Sprites，有很多不同的文章。

1. SVG 作为静态图像

   img、object、embed 指定 svg 文件的来源。

    <img 
        src="equilateral.svg" 
        alt="triangle with all three sides equal"
        height="87px"
        width="100px" />

1. HTML 内联 SVG 图像

    <svg width="300" height="200">
        <rect width="100%" height="100%" fill="green" />
    </svg>

1. CSS 内联 SVG 背景

 .img { 
   background-image: url(image.svg);
 }

4. SVG 精灵 |带有use 参考的SVG。

Ref.

<!-- SVG element  -->

<svg id="svg-test" style="width:0; height:0;">
  <clipPath id="my-clip-1">
    <circle id="circle-1" cx="50" cy="50" r="50" />
  </clipPath>
  <path id="svg-test-reference" clip-path="url(#my-clip-1)" d="M10-39.288h80v80H10z" />
</svg>

<!-- Reference SVG <path> by ID with Use -->

<svg class="svg-item" viewBox="0 0 100 100">
  <use xlink:href="#svg-test-reference" />
</svg>