html - 我不明白如何使用本地 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编号。

有很多不同的文章介绍如何使用 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 Sprite |带有 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>