2

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

    <svg
      width="23"
      height="23"
      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-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </g>
  </defs>
</svg>
4

1 回答 1

1
  1. 如果图标代码在单独的 SVG 文件中，您可以将带有图标的精灵添加到 HTML，它位于单独的 SVG 文件中，使用<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>
  1. 如果图标代码被添加到 HTML 内联中，那么您可以在网页上的任何位置多次使用此图标，使用<use>

<style>
svg  use:hover {
fill:red;
} 
</style>
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" 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-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </g>
  </defs> 
  
</svg>  
   
<svg>
<use xlink:href="#phone"></use>
</svg>

于 2020-12-10T16:40:30.727 回答