使用 javascript 以编程方式创建 SVG 图像元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6701705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Programmatically creating an SVG image element with javascript
提问by Yansky
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.
正如我的标题所说，我正在尝试使用 javascript 以编程方式在 HTML 页面中创建一个 SVG 图像元素。出于某种原因，我的基本 javascript 代码无法正常工作，但是如果我使用 raphaeljs 库，它就可以正常工作。所以我的 js 显然有问题 - 我似乎无法弄清楚它是什么。
(note: the target browser is FF4+)
（注：目标浏览器为FF4+）
Here is the basic page with an html version of what I'm trying to achieve up the top:
这是基本页面，其中包含我试图在顶部实现的 html 版本：
<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:
这是我的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/
回答by Phrogz
SVG native attributes (not including xlink:href) do not share the SVG namespace; you can either use just setAttributeinstead of setAttributeNS, or use
SVG 原生属性（不包括xlink:href）不共享 SVG 命名空间；您可以使用 justsetAttribute代替setAttributeNS，或者使用
svgimg.setAttributeNS(null,'x','0');
for example.
例如。
Here it is, working: http://jsfiddle.net/UVFBj/8/
在这里，工作：http: //jsfiddle.net/UVFBj/8/
Note that I changed your fiddle to properly use XHTML, so that SVG works nicely within it in all major browsers.
请注意，我更改了您的小提琴以正确使用 XHTML，以便 SVG 在所有主要浏览器中都能很好地工作。
回答by Paulo Bueno
For futher reference.
供进一步参考。
I've been using the function bellow to create SVG elements and it was failing to create images because of the xlink:href.
我一直在使用下面的函数来创建 SVG 元素，但由于 xlink:href 无法创建图像。
The code bellow is corrected to do that (create any svg element on the fly)
下面的代码已更正以执行此操作（即时创建任何 svg 元素）
function makeSVG(parent, tag, attrs) {
var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs){
if(k=="xlink:href"){
el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', attrs[k]);
}else{
el.setAttribute(k, attrs[k]);
}
}
}
Sample usage:
示例用法：
makeSVG('#map-tiles', 'image', { class:'map-tile', 'xlink:href':'map/xxx.jpg', width:'512px', height: '512px' x:'0', y:'0'});
The parentis used to organize 'layers' on svg groups tag.
将parent用于组织上SVG组标签“层”。
