我正在尝试使用this technique by Jake Archibald为svg路径设置动画

当将svg代码粘贴到文档中时,该技术效果很好,但是当我从“ defs.svg”文件中引用svg时,该技术将失败。

我的defs.svg看起来像这样:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol viewBox="0 0 48 50.6" id="icon-result" fill="#FFF">
    <path d="M19 49.4c-2 1.7-5.1 1.5-6.9-.5l-11-12.8c-1.7-2-1.5-5.1.5-6.9 2-1.7 5.1-1.5 6.9.5l11 12.8c1.8 2.1 1.6 5.2-.5 6.9z"/>
    <path d="M13.6 49.4c-2.2-1.5-2.9-4.5-1.4-6.8L39 2.2C40.5 0 43.5-.7 45.8.8c2.2 1.5 2.9 4.5 1.4 6.8L20.3 48.1c-1.4 2.2-4.5 2.8-6.7 1.3z"/>
  </symbol>
</svg>


在我的代码中,我执行以下操作:

<svg class="Dashboard__nav-icon">
  <use xlink:href="/svg/defs.svg#icon-result" />
</svg>


当尝试以这种方式对代码进行动画处理时,使用上面链接的Jake Archibalds技术尝试获取路径时,我会得到null。有没有办法在仍然使用单独的defs.svg文件和<use>标记的同时获取路径?

最佳答案

您将无法通过第二个<svg>元素获取DOM path元素。这是因为通过<use>引用的元素不会出现在使用它们的DOM树中。因此以下操作将无效:

var path = document.querySelector('.Dashboard__nav-icon path');


符号元素在主文档的DOM树中不可见。

但是,您将能够通过它们的定义直接引用路径。但是要使其正常工作,您需要内嵌defs.svg文件。

因此,如果defs.svg位于同一文件中,则可以使用:

var path = document.querySelector('#icon-result path');

10-05 20:29
查看更多