SVG使用多个，一次加载

用户名

我想在页面上两次使用相同的SVG，但只加载一次。

我正在用JS处理SVG的CSS，所以我认为SVG必须直接放在HTML中，而不是使用对象。

两种SVG的操作都是相同的，它们应该是完全相同的副本，因此我真的不想将其加载两次。

我有什么办法吗？

谢谢，詹姆斯

鲍勃·海绵

svg {
   color: green;
   width: 20px;
   height: 20px;
}

<!-- define SVGs -->
<div style="visibility: hidden; position: absolute; width: 0px; height: 0px;">
  <svg xmlns="http://www.w3.org/2000/svg">
  <symbol viewBox="0 0 18 15" id="sample">
    <path d="M17.9 1.85L7.675 12.318 6 14.03l-1.676-1.713L.1 8.002c-.15-.162-.146-.43.01-.597l1.07-1.15c.155-.168.403-.172.554-.01L6 10.605 16.266.094c.15-.163.4-.16.555.008l1.07 1.152c.156.167.16.435.01.596z" fill="currentColor" fill-rule="evenodd"></path>
    </symbol>
  </svg>
</div>

<!-- and use it whenever you want -->
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sample"></use></svg>

<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sample"></use></svg>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。