Question

设置svg路径的动画

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

我的 defs.svg 如下所示：

var time = new Date().getTime();
// Make miliseconds = 0 (precision full seconds)
time -= time % 1000;

在我的代码中，我执行以下操作：

<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>

当尝试以这种方式设置代码动画时，在尝试通过使用上面链接的Jake Archibalds技术获取路径时，我得到null。有没有办法在使用单独的defs.svg文件和<svg class="Dashboard__nav-icon"> <use xlink:href="/svg/defs.svg#icon-result" /> </svg>标记时获取路径？

Answer 1

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

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

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

但是，您可以通过其定义直接引用路径。但要实现这一点，您需要内联defs.svg文件。

所以，如果defs.svg在同一个文件中，那么你就可以使用：

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

从<use>标签动画SVG路径

1 个答案: