SVG 精灵。使用 <defs>、<g> 和 <use> 引用 SVG 图标

Posted 2023-03-04

技术标签:

【中文标题】SVG 精灵。使用 <defs>、<g> 和 <use> 引用 SVG 图标【英文标题】：SVG sprite. Referencing an SVG icon using <defs>, <g> and <use> 【发布时间】：2021-03-22 00:00:41 【问题描述】：

我试图在 html 中插入一个 SVG 图标以供以后使用，但是当我通过引用它时，它不会出现在网页上。我复制图标的 SVG 代码并将其插入到 html 文件中。然后我将图标的路径移动到一个单独的 .svg 文件。当我稍后引用它时，它不会显示出来。这是我的学习任务，所以我应该使用这个确切的原则和标签：和。代码的第一部分是 HTML，第二部分是单独的 .svg 文件。

    <svg
      
      
      viewBox="0 0 23 23"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <use xlink:href="#vector-icons.svg#phone"></use>
    </svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="phone">
      <path
       d="M13.9381 5C14.9149 5.19057 15.8125 5.66826 16.5162 6.37194C17.2199 7.07561 17.6976 7.97326 17.8881 8.95M13.9381 1C15.9674 1.22544 17.8597 2.13417 19.3044 3.57701C20.749 5.01984 21.6601 6.91101 21.8881 8.94M20.8881 16.92V19.92C20.8892 20.1985 20.8322 20.4742 20.7206 20.7293C20.6091 20.9845 20.4454 21.2136 20.2402 21.4019C20.035 21.5901 19.7927 21.7335 19.5289 21.8227C19.265 21.9119 18.9855 21.9451 18.7081 21.92C15.631 21.5856 12.6751 20.5341 10.0781 18.85C7.66194 17.3147 5.61345 15.2662 4.07812 12.85C2.38809 10.2412 1.33636 7.27099 1.00812 4.18C0.983127 3.90347 1.01599 3.62476 1.10462 3.36162C1.19324 3.09849 1.33569 2.85669 1.52288 2.65162C1.71008 2.44655 1.93792 2.28271 2.19191 2.17052C2.44589 2.05833 2.72046 2.00026 2.99812 2H5.99812C6.48342 1.99522 6.95391 2.16708 7.32188 2.48353C7.68985 2.79999 7.93019 3.23945 7.99812 3.72C8.12474 4.68007 8.35957 5.62273 8.69812 6.53C8.83266 6.88792 8.86178 7.27691 8.78202 7.65088C8.70227 8.02485 8.51698 8.36811 8.24812 8.64L6.97812 9.91C8.40167 12.4135 10.4746 14.4864 12.9781 15.91L14.2481 14.64C14.52 14.3711 14.8633 14.1858 15.2372 14.1061C15.6112 14.0263 16.0002 14.0555 16.3581 14.19C17.2654 14.5286 18.2081 14.7634 19.1681 14.89C19.6539 14.9585 20.0975 15.2032 20.4146 15.5775C20.7318 15.9518 20.9003 16.4296 20.8881 16.92Z"
        stroke="white"
        stroke-
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </g>
  </defs>
</svg>

【问题讨论】：

#vector-icons.svg#phone 可能不应该以#开头没有帮助。不过还是谢谢 【参考方案1】：

<object>

<object type="image/svg+xml" data="vector-icons.svg"></object>

然后使用<use>通过唯一标识符从精灵中调用所需的图标

<svg viewBox="0 0 23 23">
     <use xlink:href="vector-icons.svg#phone" ></use> 
</svg>

<use>

<style>
svg  use:hover 
fill:red;
 
</style>
<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 23 23">
  <defs>
    <g id="phone">
      <path
       d="M13.9 5C14.9 5.2 15.8 5.7 16.5 6.4 17.2 7.1 17.7 8 17.9 9M13.9 1C16 1.2 17.9 2.1 19.3 3.6 20.7 5 21.7 6.9 21.9 8.9M20.9 16.9V19.9C20.9 20.2 20.8 20.5 20.7 20.7 20.6 21 20.4 21.2 20.2 21.4 20 21.6 19.8 21.7 19.5 21.8 19.3 21.9 19 21.9 18.7 21.9 15.6 21.6 12.7 20.5 10.1 18.9 7.7 17.3 5.6 15.3 4.1 12.9 2.4 10.2 1.3 7.3 1 4.2 1 3.9 1 3.6 1.1 3.4 1.2 3.1 1.3 2.9 1.5 2.7 1.7 2.4 1.9 2.3 2.2 2.2 2.4 2.1 2.7 2 3 2H6C6.5 2 7 2.2 7.3 2.5 7.7 2.8 7.9 3.2 8 3.7 8.1 4.7 8.4 5.6 8.7 6.5 8.8 6.9 8.9 7.3 8.8 7.7 8.7 8 8.5 8.4 8.2 8.6L7 9.9C8.4 12.4 10.5 14.5 13 15.9L14.2 14.6C14.5 14.4 14.9 14.2 15.2 14.1 15.6 14 16 14.1 16.4 14.2 17.3 14.5 18.2 14.8 19.2 14.9 19.7 15 20.1 15.2 20.4 15.6 20.7 16 20.9 16.4 20.9 16.9Z"
        stroke="white"
        stroke-
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </g>
  </defs> 
  
</svg>  
   
<svg>
<use xlink:href="#phone"></use>
</svg>

【讨论】：

有了 5 位精度，您现在基本上在这 23 个像素宽度/高度中的每一个中填充 100.000 个像素您可能想要使用 jakearchibald.github.io/svgomg 并缩小路径。 xlink: 也可以删除，href 就足够了（在浏览器中），Safari 是 2018 年最后一个支持 SVG2 符号的 @Danny '365CSI' Engelman 你为什么要问我这个关于字符数的问题，而不是问问题的作者从哪里复制代码？现在我正在 svg-editor 的帮助下进行优化不问问题，添加关于精度的评论。是的，SVG-Editor 是 SVG 的主力，Jakes SVGOMG 有更好的 GUI，可能更适合入门级 SVG 修补程序。请注意，您可以通过乘以 10 并将 viewBox 设置为 0 0 230 230 来缩小 SVG 并保持精度。 yqnn.github.io/svg-path-editor 非常适合处理（单）路径；懒人处理图标的方法是我的宠物项目iconmeister.github.io

以上是关于SVG 精灵。使用 <defs>、<g> 和 <use> 引用 SVG 图标的主要内容，如果未能解决你的问题，请参考以下文章