2012-08-30 53 views
0

這個例子我可以看到屬性。多邊形屬性不起作用

jsFiddle code work well

polygon.hoverable 
{ 
    fill: blue; 
    stroke:gray; /* Replace with none if you like */ 
    stroke-width: 4; 
    cursor: pointer; 
} 

此相同的代碼無法正常工作。

var path = document.createElementNS (xmlns, "path"); 
      path.setAttributeNS (null, 'stroke', "white"); 
      path.setAttributeNS (null, 'stroke-width', 4); 
      path.setAttributeNS (null, 'fill', "yellow"); 
      polygon.appendChild (path); 

jsFiddle code not work well

<body onload="CreateSVG()"> 
    <div id="svgTriangle"></div> 
</body>​ 

function CreateSVG() { 
      var xmlns = "http://www.w3.org/2000/svg"; 
      var boxWidth = 250; 
      var boxHeight = 250; 
      var LeftWidth=(250-boxHeight)/2; 
      var RightWidth=250-LeftWidth; 
      var RopTringleX=(RightWidth-(boxWidth/2)); 
      var RopTringleY=(boxHeight); 


      var svgElem = document.createElementNS (xmlns, "svg"); 
      svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight); 
      svgElem.setAttributeNS (null, "width", boxWidth); 
      svgElem.setAttributeNS (null, "height", boxHeight); 
      svgElem.style.display = "block"; 

      var polygon = document.createElementNS (xmlns, "polygon"); 
      svgElem.appendChild (polygon); 

      polygon.setAttributeNS (null, "points", ("50,0 200,0 125,150")); 

      var path = document.createElementNS (xmlns, "path"); 
      path.setAttributeNS (null, 'stroke', "white"); 
      path.setAttributeNS (null, 'stroke-width', 4); 
      path.setAttributeNS (null, 'fill', "yellow"); 
      polygon.appendChild (path); 

      var svgContainer = document.getElementById ("svgTriangle"); 

      svgContainer.appendChild (svgElem); 
      alert(boxWidth + ' ' + boxHeight);  
     } 
CreateSVG(); 
​ 

回答

2

您需要創建多邊形元素的附加屬性,而不是創建一個路徑元素孩子,對例如設置屬性

polygon.setAttribute("points", "50,0 200,0 125,150"); 

    polygon.setAttribute('class', "hoverable"); 
    polygon.setAttribute('stroke', "white"); 
    polygon.setAttribute('stroke-width', 4); 
    polygon.setAttribute('fill', "yellow");