178
rated 0 times
[
183]
[
5]
/ answers: 1 / hits: 55119
/ 13 Years ago, fri, july 15, 2011, 12:00:00
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/
More From » svg
