用JS处理HTML中的SVG

我在使用嵌入html的svg图像中构建一个使用javascript的svg元素的问题。我创建了两个应该完全一样的文件，但其中一个文件正在使用js构建。用JS处理HTML中的SVG

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>

第二个文件，JS.html，只是白和滑动。
我在问，如何改正它？谢谢，m93a

来源

2013-04-09 m93a

var path = document.createElementNS('http://www.w3.org/2000/svg/','path');

是错误的。你想要

var path = document.createElementNS('http://www.w3.org/2000/svg','path');

注意缺少一个尾随/字符。与

var anim = document.createElementNS('http://www.w3.org/2000/svg/','animate');

同样的问题如果解决这两条线，你应该看到的箭头（我在Firefox中做的），这里有一个jsfiddle to prove it。

来源

2013-04-09 13:58:25

我不在火狐中:( – m93a 2013-04-09 14:05:22

噢，是啊！现在有用！谢谢：D – m93a 2013-04-09 14:08:30

您可能遇到的问题之一是您在加载页面后立即运行脚本，而不是等待所有元素加载。

所以基本document.getElementById（'pozadi'）;在运行时可能为空，并且由于您有外部请求（http://www.w3.org/2000/svg），所以很可能会发生这种情况。

尝试添加一个使用当前脚本调用函数的onload监听器。如果你有jQuery，这就是你正在寻找的http://api.jquery.com/ready/。如果没有...手动制作。

来源

2013-04-09 13:52:32 zozo

document.getElementById（'pozadi'）不依赖布局，因此您可以随时运行它。你不需要在这里使用onload。 – 2013-04-09 13:59:04

Omg ...从什么时候开始？将脚本放在顶部并查看其差异。 – zozo 2013-04-09 14:00:55

如果svg位于脚本元素的“上方”，则应准备好使用svg的dom。如果在下面，只能等待完成。 – m93a 2013-04-09 14:01:46

用JS处理HTML中的SVG

回答

相关问题