Closed Bug 1059560 Opened 7 years ago Closed 7 years ago

Dynamically added <use> tag through innerHTML in <svg> will not render

Categories

(Core :: SVG, defect)

31 Branch
x86
macOS
defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 886390

People

(Reporter: chengyin.liu, Unassigned)

References

()

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36

Steps to reproduce:

To help illustrate what happened, I created this demo:

http://codepen.io/anon/pen/ntEaB


1. Include svg symbols with ids in the HTML (line 1-25)
2. Create a <svg> element with <use> in it, and reference to the svg symbols with `xlink:href` attribute (line 29, 32)
3. Click "Change", which uses JS to change the innerHTML of <svg> to a different <use> HTML (The javascript file)

Observe that even though the JS script is setting to a perfectly fine innerHTML, the svg doesn't show up.


Actual results:

The changed svg element is empty


Expected results:

the changed svg element should show the same symbol as the right-hand side one.
There was an unnecessary debugger in the previous code, here is a new one:

http://codepen.io/anon/pen/zrfdu
Component: Untriaged → SVG
Product: Firefox → Core
Works if you use setAttributeNS() to restyle the existing <use>, instead of setting .innerHTML:
 http://codepen.io/anon/pen/vuKmC

Not sure what's going on, though.
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 886390
You need to log in before you can comment on or make changes to this bug.