从 <use> 标记对 SVG 路径进行动画处理

Animate SVG path from <use> tag

本文关键字：路径 动画 SVG 处理 use      更新时间：2023-09-26

我正在尝试使用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 路径元素。这是因为通过<use>引用的元素不会出现在使用它们的 DOM 树中。 因此，以下内容将不起作用：

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

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

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

因此，如果 defs.svg 位于同一文件中，那么您将能够使用：

var path = document.querySelector('#icon-result path');
相关文章：