我不明白如何使用本地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);
 }

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