How can I add an <image> element to the SVG DOM
Here is one way of doing it:
var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttributeNS(null,'height','200');
svgimg.setAttributeNS(null,'width','200');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href', 'myimage.jpg');
svgimg.setAttributeNS(null,'x','10');
svgimg.setAttributeNS(null,'y','10');
svgimg.setAttributeNS(null, 'visibility', 'visible');
$('svg').append(svgimg);
Danny Browne
Updated on June 03, 2022Comments
-
Danny Browne about 2 years
I have a web page with a jpg image that the user draw an SVG doodle on top of using Raphael.
I want to allow the user to save a merged rasterised version of this when they are done (i will be doing something else with SVG version myself)
When the user clicks save I want to add that background image to the generated SVG DOM as an element and then use canvg to write the SVG to a canvas element. Finally I use the toDataUrl() method to turn that into a jpg.
I can't get the middle bit to work —what is the best way to add the image to the DOM? When i use the below code I get a javascript error that says appendChild() is not a function.
I am wondering if it has something to do with how I get the SVG using the .html() method —perhaps what ever is returned is not being interpreted as a real SVG document??
Any help much appreciated.
function saveImage(){ var img = document.getElementById('canvas').toDataURL("image/png"); window.open(img,'Download'); } $('#save').click(function(){ var svg = $('#editor').html(); // Create new SVG Image element. Must also be careful with the namespaces. var svgimg = document.createElementNS("http://www.w3.org/2000/svg", "image"); svgimg.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', "myimage.jpg"); // Append image to SVG svg.appendChild(svgimg); canvg('canvas', svg, {renderCallback: saveImage(), ignoreMouse: true, ignoreAnimation: true, ignoreDimensions: true}); });
-
SuperUberDuper almost 4 yearsdoesn't work, image tag is appended but no network call is done, mid you I am not using jquery here, but native element