使用Javascript以編程方式創建SVG標記

是否可以使用Javascript在SVG中創建標記，然後將其應用於新創建的行？如果是這樣，請你能告訴我下面的代碼有什麼問題。我希望紅線和綠線都有箭頭，但在Chrome和Firefox 3.6中都只有綠線。使用Javascript以編程方式創建SVG標記

<?php 

header('Content-type: application/xhtml+xml'); 
echo '<?xml version="1.0" encoding="utf-8" ?>'; 

?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>SVG test</title> 
<script type="text/javascript"> 
function init() 
{ 
    var div = document.getElementById('mainDiv'); 

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

    svgNode.style.width = "200px"; 
    svgNode.style.height = "200px"; 
    svgNode.style.overflow = 'visible'; 
    svgNode.style.position = 'absolute'; 
    svgNode.setAttribute('version', '1.1'); 
    svgNode.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); 
    div.appendChild(svgNode); 

    var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs'); 
    var marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker'); 
    marker.setAttribute('id', 'Triangle'); 
    marker.setAttribute('viewBox', '0 0 10 10'); 
    marker.setAttribute('refX', '0'); 
    marker.setAttribute('refY', '5'); 
    marker.setAttribute('markerUnits', 'strokeWidth'); 
    marker.setAttribute('markerWidth', '4'); 
    marker.setAttribute('markerHeight', '3'); 
    marker.setAttribute('orient', 'auto'); 
    var path = document.createElementNS('http;//www.w3.org/2000/svg', 'path'); 
    marker.appendChild(path); 
    path.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z'); 

    svgNode.appendChild(defs); 
    defs.appendChild(marker); 

    var obj = document.createElementNS('http://www.w3.org/2000/svg', 'line'); 
    obj.setAttribute('x1', 50); 
    obj.setAttribute('y1', 50); 
    obj.setAttribute('x2', 50); 
    obj.setAttribute('y2', 150); 
    obj.setAttribute('stroke', '#ff0000'); 
    obj.setAttribute('stroke-width', 7); 
    obj.setAttribute('marker-end', 'url(#Triangle)'); 

    svgNode.appendChild(obj); 


} 
</script> 
</head> 

<body onload="init();"> 
<div id="mainDiv" style="width: 100%; height: 100%; visibility: visible; overflow: visible; position: absolute; background: white;"> 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 200px; height: 200px; position: absolute;"> 
     <defs> 
      <marker id="Triangle-static" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto"> 
       <path d="M 0 0 L 10 5 L 0 10 z"></path> 
      </marker> 
     </defs> 
     <line x1="150" y1="50" x2="150" y2="150" stroke="#00ff00" stroke-width="7" marker-end="url(#Triangle-static)" /> 
    </svg> 
</div> 
</body> 

</html>

由於提前，
ngreatorex

來源

2010-07-20 ngreatorex

它工作得很好，如果我改變你的代碼的某些部分是這樣的：

var newmarker = oldmarker.cloneNode(true); 
newmarker.setAttribute("id", "Triangle");

...這表明錯誤在於創建標記元素的代碼。

來源

2010-07-20 18:39:26

好吧，我現在感到很蠢 - 事實證明問題是一個錯字。如果你看一下這行： var path = document.createElementNS（'http; // www.w3.org/2000/svg'，'path'）; 你會看到http; //而不是http：//。哎呦！謝謝你指點我在正確的方向。 – ngreatorex 2010-07-21 08:15:37

使用Javascript以編程方式創建SVG標記

回答

相關問題