我正在尝试使用 JavaScript (velocity.js) 为我定义的 SVG 制作动画<defs>
然后实例化为<use>
我在访问我尝试修改的 SVG 组件的 DOM 元素时遇到问题。我的代码可以正常使用普通内联 SVG,但是当我切换到<defs>
/<use>
它打破的方法。
当我使用内联 SVG 时,我可以console.log
有问题的元素并返回信息,但尝试访问使用生成的相同元素<use>
返回一个空对象。当尝试访问使用以下命令生成的 SVG 的 DOM 元素时,我需要做什么特别的事情<use>
?
The HTML
<div class="screen">
<svg>
<use href="/media/defs.svg#poppyIdle"></use>
</svg>
</div>
和 defs.svg 的顶部(由 inkscape 生成,我所做的就是添加<defs>
and <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 元素实例上的任何属性。它不像宏。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)