我不明白如何使用本地 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=和 SVGpath或symbolid。

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

1. 作为静态图像的 SVG

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

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

2. HTML 内嵌 SVG 图像

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

3. CSS 内联 SVG 背景

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

4. SVG 精灵 | SVGuse参考。

参考号

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