我正在尝试使用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');