Programmatically creating an SVG image element with javascript
Solution 1
SVG native attributes (not including xlink:href
) do not share the SVG namespace; you can either use just setAttribute
instead of setAttributeNS
, or use
svgimg.setAttributeNS(null,'x','0');
for example.
Here it is, working: http://jsfiddle.net/UVFBj/8/
Note that I changed your fiddle to properly use XHTML, so that SVG works nicely within it in all major browsers.
Solution 2
For futher reference.
I've been using the function bellow to create SVG elements and it was failing to create images because of xlink:href
must be created using setAtributeNS
.
The code bellow is corrected to do that (create any svg element on the fly)
function makeSVG(parent, tag, attrs) {
var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs){
if(k=="xlink:href"){
el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', attrs[k]);
}else{
el.setAttribute(k, attrs[k]);
}
}
}
Sample usage:
makeSVG('#map-tiles', 'image', { class:'map-tile', 'xlink:href':'map/xxx.jpg', width:'512px', height: '512px' x:'0', y:'0'});
The parent
is used to organize 'layers' on svg groups tag.
Yansky
Updated on June 28, 2020Comments
-
Yansky almost 4 years
Like my title says, I'm trying to programmatically creating an SVG image element in a HTML page using javascript. For some reason my basic javascript code isn't working, however if I use the raphaeljs library it works fine. So there's obviously a problem with my js - I just can't seem to figure out what it is.
(note: the target browser is FF4+)
Here is the basic page with an html version of what I'm trying to achieve up the top:
<html> <head> <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="test1" height="200px" width="200px"> <image id="testimg1" xlink:href="http://i.imgur.com/LQIsf.jpg" width="100" height="100" x="0" y="0"/> </svg> <hr /> <p id="testP1"> </p> <hr /> <p id="testP2"> </p> </body> </html>
And here is my javascript:
var paper = Raphael(document.getElementById("testP1"), 200, 200); paper.image("http://i.imgur.com/LQIsf.jpg", 0,0, 100, 100); var svg = document.createElementNS('http://www.w3.org/2000/svg','svg'); svg.setAttributeNS('http://www.w3.org/2000/svg','xlink','http://www.w3.org/1999/xlink'); svg.setAttributeNS('http://www.w3.org/2000/svg','height','200'); svg.setAttributeNS('http://www.w3.org/2000/svg','width','200'); svg.setAttributeNS('http://www.w3.org/2000/svg','id','test2'); var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image'); svgimg.setAttributeNS('http://www.w3.org/2000/svg','height','100'); svgimg.setAttributeNS('http://www.w3.org/2000/svg','width','100'); svgimg.setAttributeNS('http://www.w3.org/2000/svg','id','testimg2'); svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','http://i.imgur.com/LQIsf.jpg'); svgimg.setAttributeNS('http://www.w3.org/2000/svg','x','0'); svgimg.setAttributeNS('http://www.w3.org/2000/svg','y','0'); svg.appendChild(svgimg); document.querySelector('#testP2').appendChild(svg);
Live example: http://jsfiddle.net/Yansky/UVFBj/5/
-
Max Yari almost 9 yearsYou saved my day, You are a Gentleman and a Scholar, think you sir.
-
Zander almost 9 yearsOne question, is the image need to be linked fully from an address domain, or also can be linked from internal server with relative/absolute path?
-
Zander almost 9 years@Phrogz what does TIAS mean?
-
Phrogz almost 9 years@Cheshire: Try It And See.
-
dkellner almost 9 yearsI think you should insert the new element after creating it. That's what you have the "parent" parameter for.
-
VirtuosiMedia over 8 yearsThank you for this. I found it after about 8 hours of searching for solutions.