I want to load an image file inside of an SVG-. It works well in Firefox and IE but for some reason not in Chrome.
svgItem.setAttribute("xlink:href", "http://link/to.png");
Is there some workarround?
Asked
Active
Viewed 1,223 times
1
Daveman
- 1,075
- 9
- 26
-
1Just an idea, but did you try `setAttributeNS`? – Sep 20 '14 at 14:02
-
What do I have to pick as namespace param? I've tried "http://www.w3.org/2000/svg" without any success. – Daveman Sep 20 '14 at 14:07
-
No, you need the xlink namespace. – Sep 20 '14 at 16:50
1 Answers
1
setAttributeNS does the Job!
svgItem.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href", "http://link/to.png");
Daveman
- 1,075
- 9
- 26
-
Note that this is just required when you set the attribute the first time. Modifying an already existing attribute like `xlink:href` won't require us to use `setAttributeNS` instead of `setAttribute`. – King King Sep 20 '14 at 14:40
-
@KingKing I'd recommend going with `setAttributeNS` for any attribute that has a prefix, see http://w3c.github.io/dom/#dom-element-setattribute. – Erik Dahlström Sep 23 '14 at 15:02
-
@ErikDahlström thanks but I won't. I understand that the setAttribute works on the ***attribute node***. This node already contains information about the namespace because it was created before with `setAttributeNS`. The link you give me is not helpful to me. – King King Sep 23 '14 at 15:44
-
@KingKing ok you're technically right, though what's the harm in using `setAttributeNS` for such attributes when it works 100% of the time? – Erik Dahlström Sep 24 '14 at 13:48