尝试使用 JavaScript 访问由 <use> 生成的 SVG 元素答案

【问题标题】：Trying to access SVG elements generated with <use> with JavaScript尝试使用 JavaScript 访问由 <use> 生成的 SVG 元素
【发布时间】：2021-04-08 02:35:28
【问题描述】：

我正在尝试使用 JavaScript (velocity.js) 为我使用 <defs> 定义的 SVG 设置动画，然后使用 <use> 进行实例化，但我无法访问 SVG 组件的 DOM 元素正在尝试修改。我的代码适用于普通的内联 SVG，但当我切换到 <defs>/<use> 方法时它会中断。

当我使用内联 SVG 时，我可以 console.log 有问题的元素并返回信息，但尝试访问使用 <use> 生成的相同元素会返回一个空对象。在尝试访问使用<use> 生成的 SVG 的 DOM 元素时，我需要做些什么特别的事情吗？

HTML

<div class="screen">
       <svg>
         <use href="/media/defs.svg#poppyIdle"></use>
       </svg>
</div>

defs.svg 的顶部（由inkscape 生成，我所做的只是添加<defs> 和<symbol>）（不想发布整个内容）

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
  <defs>
  <symbol id="poppyIdle" viewBox="0 0 140 250">
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
<g
     inkscape:groupmode="layer"
     id="layer12"
     inkscape:label="eyelids"
     style="display:inline"
     transform="translate(-6.125676,0.02323548)">
    <rect
       style="fill:#4d4d4d;fill-opacity:1;stroke-width:0.0694716"
       id="rect942-3"
       width="28.423023"
       height="2.0695279"
       x="34.666679"
       y="34.632057" />
    <rect
       style="display:inline;fill:#4d4d4d;fill-opacity:1;stroke-width:0.0694716"
       id="rect942-3-6"
       width="28.423023"
       height="2.0695279"
       x="85.931053"
       y="34.629658" />
  </g>
  </symbol>
  </defs>
</svg>

【问题讨论】：

您可能不想发布整个内容，但至少要发布一个大幅缩减但完整的 SVG 文件。更好的是：使用minimal reproducible example 显示您的问题（在代码块中，或作为可运行的 sn-p）。
@Mike'Pomax'Kamermans 啊，感谢您的提醒，这是我的第一个问题。我在帖子中添加了我想要制作动画的 SVG 元素
代码在哪里？这里只有 SVG 标记。

标签： javascript html jquery svg

【解决方案1】：

SVG 使用元素就像 HTML 中的影子 DOM 元素。只有 USE 元素本身的属性通过 SVG DOM 公开 - 您不能更改从原始符号克隆的单个 USE 元素实例上的任何属性。它不像宏。

【讨论】：