Programmatically creating an SVG image element with javascript

Question 1

Programmatically creating an SVG image element with javascript

javascript svg raphael

Yansky · Jul 15, 2011 · Viewed 44.6k times · Source

Answer

Answer

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.

Question 2

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/

Programmatically creating an SVG image element with javascript

Answer

Related questions