使用 javascript 和 jquery 将图像添加到 svg 文件答案

【问题标题】：adding image to svg file using javascript and jquery使用 javascript 和 jquery 将图像添加到 svg 文件
【发布时间】：2012-05-01 10:27:18
【问题描述】：

我正在尝试将图像添加到 SVG 文件中。我试过这段代码::

drawImage : function(src, x, y, h, w) {
        var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
        var $img = $(img);
        $img.attr('x', x);
        $img.attr('y', y);
        $img.attr('width', w);
        $img.attr('height', h);
        $img.attr('xlink:href', src);
        $('g').append($img);
    }

但图像没有出现。当我选择所有图像时.. 使用$('image') 我找到了图像，我可以选择它，但仍然.. 它不可见。我试图调查这个问题，但一无所获。我做错了什么？？

【问题讨论】：

标签： javascript jquery image svg

【解决方案1】：

如何为$('g') 分配宽度和高度，它在您的代码中保存$img？

【讨论】：

我还没有尝试过，但我怀疑这是问题所在，因为我创建了其他元素（矩形、圆形、路径..等）并且所有这些元素都绘制在屏幕上，此外，我不认为我可以有那个能力（改变g的宽度和高度）

【解决方案2】：

你可以使用setAttributeNS方法：

var img = document.createElementNS('http://www.w3.org/2000/svg','image');
img.setAttributeNS(null,'height','200');
img.setAttributeNS(null,'width','200');
img.setAttributeNS(null,'id','theID');
img.setAttributeNS('http://www.w3.org/1999/xlink','href','src');
img.setAttributeNS(null,'x','0');
img.setAttributeNS(null,'y','0');
$('#g').append(img);

【讨论】：

这是一个简单的功能。我认为我不需要一个完整的库来完成一个简单的任务。正如我对第一个答案的评论一样，我创建了类似的绘图函数（矩形、圆形、路径等），它们工作正常，看起来与此相似，但我看不出其中的问题跨度>
使用 "setAttributeNS" 无效，它创建了这个元素 <image height="300" width="300" href="images/stair.png" x="5000" y="5000"></image> 并且它没有显示在屏幕上（chrome 开发工具说它的位置在 (0,0) !!）
在 setAttributeNS 调用中，只有 xlink 是正确的，其他的都应该传递 null 作为第一个参数。
如果不需要命名空间，可以使用setAttribute()developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute

【解决方案3】：

我找到了一个 jQuery 插件解决了我的问题jQuery.svg

它有几种方法来绘制不同的形状，包括图像。

它似乎是通过使用原生 JavaScript 创建一个 dom 节点来添加图像的。它可以工作

【讨论】：