Programmatically creating an SVG image element with javascript

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/

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.

For futher reference.

I've been using the function bellow to create SVG elements and it was failing to create images because of the xlink:href.

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.

来源：https://stackoverflow.com/questions/6701705/programmatically-creating-an-svg-image-element-with-javascript

标签

javascript

svg

raphael