尝试访问使用 <use> 生成的 SVG 元素使用 JavaScript [英] Trying to access SVG elements generated with <use> with JavaScript
问题描述
我正在尝试使用 JavaScript (velocity.js) 为我使用 <defs>
定义的 SVG 设置动画,然后使用 <use>
实例化> 并且我在访问我尝试修改的 SVG 组件的 DOM 元素时遇到问题.我的代码与普通的内联 SVG 一起工作得很好,但是当我切换到 <defs>
/<use>
方法时,它会中断.
当我使用内联 SVG 时,我可以 console.log
相关元素并返回信息,但尝试访问使用 生成的相同元素返回一个空对象.在尝试访问使用
<use>
生成的 SVG 的 DOM 元素时,我有什么特别需要做的吗?
HTML
和defs.svg的顶部(由inkscape生成,我所做的只是添加
和
)(不想发布整件事)
<svgxmlns: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"><定义><symbol id="poppyIdle";viewBox=0 0 140 250"><元数据id=元数据5"><rdf:RDF><cc:工作rdf:about=""><dc:format>图像/svg+xml</dc:format><dc:类型rdf:resource=http://purl.org/dc/dcmitype/StillImage"/><dc:title></dc:title></cc:工作></rdf:RDF></元数据><ginkscape:groupmode=图层"id=layer12"inkscape:标签=眼睑"样式=显示:内联"变换=翻译(-6.125676,0.02323548)"><rectstyle="fill:#4d4d4d;fill-opacity:1;stroke-width:0.0694716";id="rect942-3";宽度=28.423023"高度=2.0695279"x=34.666679"y=34.632057"/><rectstyle="display:inline;fill:#4d4d4d;fill-opacity:1;stroke-width:0.0694716";id=rect942-3-6"宽度=28.423023";高度=2.0695279"x=85.931053"y=34.629658"/></符号></defs></svg>
SVG 使用的元素就像 HTML 中的 shadow DOM 元素.只有 USE 元素本身的属性通过 SVG DOM 公开 - 您不能更改从原始符号克隆的单个 USE 元素实例上的任何属性.它不像一个宏.
I'm trying to use JavaScript (velocity.js) to animate an SVG that I've defined using <defs>
and then instantiated with <use>
and I'm having trouble accessing the DOM element of the SVG component I'm trying to modify. My code works with normal inline SVG just fine, but when I switch to the <defs>
/<use>
method it breaks.
When I use the inline SVG I can console.log
the element in question and it returns information, but trying to access that same element generated with <use>
returns an empty object. Is there anything in particular I need to be doing when trying to access the DOM elements of SVG generated with <use>
?
The HTML
<div class="screen">
<svg>
<use href="/media/defs.svg#poppyIdle"></use>
</svg>
</div>
and top of defs.svg (generated by inkscape, all I did was add <defs>
and <symbol>
) (don't want to post the whole thing)
<?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 use elements are like shadow DOM elements in HTML. Only the attributes of the USE element itself is exposed via the SVG DOM - you cannot alter any properties on a single USE element instance that are being cloned from the original symbol. It's not like a macro.
这篇关于尝试访问使用 <use> 生成的 SVG 元素使用 JavaScript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!