serque
07-09-2007, 02:10 PM
I'm trying to create a SVG-image using javascript. This works fine except when I want to add an image to the SVG. I've written tehe following code to add an image:
var svgNamespace = 'http://www.w3.org/2000/svg';
var svgXlink = 'http://www.w3.org/1999/xlink';
var xmlNamespace = 'http://www.w3.org/XML/1998/namespace';
// get the canvas div
var container = document.getElementById(elem);
// create the SVG
var svg = container.ownerDocument.createElementNS(svgNamespace, "svg");
svg.setAttributeNS(null, 'width', '700px');
svg.setAttributeNS(null, 'height', '500px');
svg.setAttributeNS(null, 'id', 'svg');
// create the image-element
var img = svg.ownerDocument.createElementNS(svgNamespace, 'image');
img.setAttributeNS(svgXlink, 'xlink:href', "http://www.site.com/image.jpg");
svg.appendChild(img);
container.appendChild(svg);
alert(container.innerHTML);
The problem is that javascript won't add the closing tag </image> or make it selfclosing like <image />. This makes it unviewable by an SVG-viewer. I've tried many things with different namespaces etc., all without any success.
Does someone have a solution for this?
var svgNamespace = 'http://www.w3.org/2000/svg';
var svgXlink = 'http://www.w3.org/1999/xlink';
var xmlNamespace = 'http://www.w3.org/XML/1998/namespace';
// get the canvas div
var container = document.getElementById(elem);
// create the SVG
var svg = container.ownerDocument.createElementNS(svgNamespace, "svg");
svg.setAttributeNS(null, 'width', '700px');
svg.setAttributeNS(null, 'height', '500px');
svg.setAttributeNS(null, 'id', 'svg');
// create the image-element
var img = svg.ownerDocument.createElementNS(svgNamespace, 'image');
img.setAttributeNS(svgXlink, 'xlink:href', "http://www.site.com/image.jpg");
svg.appendChild(img);
container.appendChild(svg);
alert(container.innerHTML);
The problem is that javascript won't add the closing tag </image> or make it selfclosing like <image />. This makes it unviewable by an SVG-viewer. I've tried many things with different namespaces etc., all without any success.
Does someone have a solution for this?