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

Status: RESOLVED DUPLICATE of bug 886390

(Core :: SVG, defect)

Description

[chengyin.liu]

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.

Comment 1

[chengyin.liu]

There was an unnecessary debugger in the previous code, here is a new one:

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

Comment 2

[Daniel Holbert [:dholbert]]

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.