使用 Javascript 在 SVG 中附加路径子项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10546135/
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
Appending path child within SVG Using Javascript
提问by Infinite Constructor
Good Day,
再会，
I am having incredible difficulty in creating a path and displaying it using "appendChild" within an SVG element.
我在创建路径并在 SVG 元素中使用“appendChild”显示它时遇到了难以置信的困难。
I have to be missing something critically simple as I have poured over W3C's specs, w3schools.com, various posts here and trying to ninja google in various ways.
我必须遗漏一些非常简单的东西，因为我倾注了 W3C 的规范、w3schools.com、这里的各种帖子并试图以各种方式忍者谷歌。
I am testing within FireFox and Chrome.
我正在 FireFox 和 Chrome 中进行测试。
I have a simple svg file thus:
我有一个简单的 svg 文件，因此：
<svg xmlns:svg ... id="fullPageID">
<image id="timer1" x="100" y="100" width="100px" height="100px" xlink:href="../component/timer/timer1.svg" />
<image id="battery1" x="200" y="200" width="100px" height="100px" xlink:href="../component/battery/30x20_ochre.svg" />
<script xlink:href="pathMaker.js" type="text/javascript" id="pathMaker" />
</svg>
The script I am attempting to use looks like:
我尝试使用的脚本如下所示：
newpath = document.createElementNS("SVG","path");
newpath.setAttribute("id", "pathIdD");
newpath.setAttribute("d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");
newpath.setAttribute("stroke", "black");
newpath.setAttribute("stroke-width", 3);
newpath.setAttribute("opacity", 1);
newpath.setAttribute("fill", "none");
document.getElementById("fullPageID").appendChild(newpath);
I just want to make something simple work. Am I wrong to think that I don't require a solution as complicated as the one found at Library to generate SVG Path with Javascript??
我只想做一些简单的工作。我错误地认为我不需要像库中那样复杂的解决方案来使用 Javascript 生成 SVG 路径吗？?
Thanks Kindly.
谢谢。
回答by Anthony
There are two issues:
有两个问题：
As already pointed out, you have to use the full namespace uri, so in this case:
newpath = document.createElementNS('http://www.w3.org/2000/svg',"path");Attributes also need to be set with namespace in mind. The good news is that you can pass in
nullas the namespace uri, so:newpath.setAttributeNS(null, "d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");
正如已经指出的，您必须使用完整的命名空间 uri，因此在这种情况下：
newpath = document.createElementNS('http://www.w3.org/2000/svg',"path");还需要考虑命名空间来设置属性。好消息是您可以
null作为命名空间 uri传入，因此：newpath.setAttributeNS(null, "d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");
Also, here are two ways to make dealing with the svg namespace easier (assuming that it is a standalone svg, not embedded in HTML):
此外，这里有两种方法可以更轻松地处理 svg 命名空间（假设它是一个独立的 svg，而不是嵌入在 HTML 中）：
- To refer to the svg element, instead of giving it an ID, you can use
document.rootElement. document.rootElement.getAttribute(null, "xmlns")returns an empty string (while requesting other attributes does work using this method. Instead, usedocument.rootElement.namespaceURI.
- 要引用 svg 元素，您可以使用
document.rootElement. document.rootElement.getAttribute(null, "xmlns")返回一个空字符串（虽然请求其他属性确实使用此方法工作。相反，使用document.rootElement.namespaceURI.
So in your code, you could make the following rewrites:
因此，在您的代码中，您可以进行以下重写：
From:
从：
newpath = document.createElementNS("http://www.w3.org/2000/svg","path");
To:
到：
newpath = document.createElementNS(document.rootElement.namespaceURI,"path");
And to append the element, you can go from:
要附加元素，您可以从：
document.getElementById("fullPageID").appendChild(newpath);
to:
到：
document.rootElement.appendChild(newpath);
So the final script would be:
所以最终的脚本将是：
newpath = document.createElementNS(document.rootElement.namespaceURI,"path");
newpath.setAttributeNS(null, "id", "pathIdD");
newpath.setAttributeNS(null, "d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");
newpath.setAttributeNS(null, "stroke", "black");
newpath.setAttributeNS(null, "stroke-width", 3);
newpath.setAttributeNS(null, "opacity", 1);
newpath.setAttributeNS(null, "fill", "none");
document.rootElement.appendChild(newpath);
回答by Steve Jorgensen
The namespace needs to be "http://www.w3.org/2000/svg", not "SVG" in the createElementNScall.
命名空间需要是“http://www.w3.org/2000/svg”，而不是createElementNS调用中的“SVG” 。
