javascript - 尝试访问生成的 SVG 元素
问题描述
我正在尝试使用 JavaScript (velocity.js) 为我使用定义<defs>
然后实例化的 SVG 设置动画,<use>
但我无法访问我尝试修改的 SVG 组件的 DOM 元素。我的代码适用于普通的内联 SVG,但是当我切换到<defs>
/<use>
方法时它会中断。
当我使用内联 SVG 时,我可以console.log
获取相关元素并返回信息,但尝试访问生成的相同元素会<use>
返回一个空对象。在尝试访问使用生成的 SVG 的 DOM 元素时,我需要做些什么特别的事情<use>
吗?
的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 使用元素就像 HTML 中的影子 DOM 元素。只有 USE 元素本身的属性通过 SVG DOM 公开 - 您不能更改从原始符号克隆的单个 USE 元素实例上的任何属性。它不像宏。
推荐阅读
- node.js - 如何使用momentjs管理日期以进行每月付款?
- tensorflow - Conv2d 如何在不同的输入维度和过滤器维度下工作?
- python - 我正在尝试从网页中抓取一些数据并不断收到 selenium.common.exceptions.TimeoutException 错误
- java - 如何在不清除 Google Play 商店缓存的情况下立即运行应用内更新
- android - 从子活动返回另一个片段
- python - Scipy curve_fit 接缝效果不佳。哪个用于拟合曲线的python库更稳定?
- macos - Mac M1 - 内核似乎已经死亡。它会自动重启
- javascript - 如何将数组中的值推入存在于状态对象内部的反应中
- flutter - 多个 Flutters Ios 崩溃
- android - 在 Jetpack Compose 中确定键盘是否存在并相应更改布局