用JS处理HTML中的SVG [英] Manipulate SVG in HTML with JS
本文介绍了用JS处理HTML中的SVG的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在使用嵌入html的svg图像中使用javascript构建svg元素时遇到了问题。我创建了两个应该完全一样的文件，但其中一个文件正在使用js构建。
SVG.html b
$ b
<！DOCTYPE HTML>
< html>
< head>
< meta charset =utf-8/>
< title>Pozadí< / title>
< / head>
< body>
< svg
id =pozadi
xmlns =http://www.w3.org/2000/svg
version =1.1
height =200
width =200
>
<路径
d =M 0,0 L 150,150 L 100,150 L 150,150 L 150,100
style =stroke：＃000; stroke-width：2px; stroke-linecap：round;填充：无;
>
to =M 0,0 L 150,150 L 100,150 L 150,150 L 150,100
dur =10s
begin =5s
attributeType =XML
attributeName =d
>
< / animate>
< / path>
< / svg>
< / body>
< / html>
JS.html
<！DOCTYPE HTML>
< html>
< head>
< meta charset =utf-8/>
< title>Pozadí< / title>
< / head>
< body>
< svg
id =pozadi
xmlns =http://www.w3.org/2000/svg
version =1.1
height =200
width =200
>
< / svg>
< script>
var svg = document.getElementById（'pozadi'）;
var path = document.createElementNS（'http://www.w3.org/2000/svg/','path'）; //我也尝试过createElement（字符串）
path.setAttribute（'style'，stroke：＃000; stroke-width：2px; stroke-linecap：round; fill：none;）;
path.setAttribute（'d'，M 0,0 L 150,150 L 100,150 L 150,150 L 150,100）;
var anim = document.createElementNS（'http://www.w3.org/2000/svg/','animate'）;
anim.setAttribute（'from'，'M 0,0 L 150,0 L 115,35 L 150,0 L 115，-35'）;
anim.setAttribute（'to'，'M 0,0 L 150,150 L 100,150 L 150,150 L 150,100'）;
anim.setAttribute（'dur'，'10s'）;
anim.setAttribute（'begin'，'5s'）;
anim.setAttribute（'attributeType'，'XML'）;
anim.setAttribute（'attributeName'，'d'）;
path.appendChild（anim）;
svg .appendChild（path）;
< / script>
< / body>
< / html>
第二个文件JS.html只是白色和纯色。
我在问，如何改正它？谢谢，m93a
解决方案
var path = document.createElementNS（'http：// www .w3.org / 2000 / SVG /， '路径'）;
是错误的。你想
var path = document.createElementNS（'http://www.w3.org/2000/svg'，'路径'）;
请注意缺少尾部/字符。与
同样的问题 var anim = document.createElementNS（'http://www.w3.org/2000/svg/' ， '动画'）;
如果你修复了这两行，你应该看到箭头（我在Firefox中） a href =http://jsfiddle.net/longsonr/TuYYh/ =nofollow> jsfiddle来证明它。。
I'm having an problem with construction of a svg element using javascript in an html-embedded svg image. I created two files that should be exactly the same but one of them is being constructed with js.
SVG.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Pozadí</title>
</head>
<body>
<svg
id="pozadi"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
height="200"
width="200"
>
<path
d="M 0,0 L 150,150 L 100,150 L 150,150 L 150,100"
style="stroke: #000; stroke-width: 2px; stroke-linecap: round; fill: none;"
>
<animate
from="M 0,0 L 150,0 L 115,35 L 150,0 L 115,-35"
to="M 0,0 L 150,150 L 100,150 L 150,150 L 150,100"
dur="10s"
begin="5s"
attributeType="XML"
attributeName="d"
>
</animate>
</path>
</svg>
</body>
</html>
JS.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Pozadí</title>
</head>
<body>
<svg
id="pozadi"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
height="200"
width="200"
>
</svg>
<script>
var svg = document.getElementById('pozadi');
var path = document.createElementNS('http://www.w3.org/2000/svg/','path'); //I have tried createElement(string) too
path.setAttribute('style',"stroke: #000; stroke-width: 2px; stroke-linecap: round; fill: none;");
path.setAttribute('d',"M 0,0 L 150,150 L 100,150 L 150,150 L 150,100");
var anim = document.createElementNS('http://www.w3.org/2000/svg/','animate');
anim.setAttribute('from','M 0,0 L 150,0 L 115,35 L 150,0 L 115,-35');
anim.setAttribute('to','M 0,0 L 150,150 L 100,150 L 150,150 L 150,100');
anim.setAttribute('dur','10s');
anim.setAttribute('begin','5s');
anim.setAttribute('attributeType','XML');
anim.setAttribute('attributeName','d');
path.appendChild(anim);
svg .appendChild(path);
</script>
</body>
</html>
The second file, JS.html, is just white and plain.
I'm asking, how to correct it? Thanks, m93a
解决方案
var path = document.createElementNS('http://www.w3.org/2000/svg/','path');
is wrong. You want
var path = document.createElementNS('http://www.w3.org/2000/svg','path');
Note the lack of a trailing / character. Same problem with
var anim = document.createElementNS('http://www.w3.org/2000/svg/','animate');
If you fix these two lines you should see the arrow (I do in Firefox), here's a jsfiddle to prove it.
这篇关于用JS处理HTML中的SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
