用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

回答

相關問題