如何添加< image>元素到SVG DOM [英] How can I add an <image> element to the SVG DOM
问题描述
我有一个带有jpg图像的网页,用户可以在使用Raphael的基础上绘制SVG涂鸦。
I have a web page with a jpg image that the user draw an SVG doodle on top of using Raphael.
我想允许用户保存合并完成后的光栅化版本(我将使用SVG版本自己做其他事情)
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)
当用户点击保存时,我想将该背景图像添加到生成的将SVG DOM作为元素,然后使用canvg将SVG写入canvas元素。最后我使用toDataUrl()方法将其转换为jpg。
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.
我无法使中间位工作 - 添加图像的最佳方法是什么到DOM?当我使用下面的代码时,我得到一个javascript错误,说明appendChild()不是一个函数。
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.
我想知道它是否与我如何使用.html()方法获取SVG有关 - 也许返回的内容并没有被解释为真实的SVG文件??
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??
任何帮助非常感谢。
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});
});
推荐答案
这是一种方法:
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);
这篇关于如何添加< image>元素到SVG DOM的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!