多边形的属性不起作用答案

【问题标题】：attribute of polygon is not working多边形的属性不起作用
【发布时间】：2012-08-25 04:17:06
【问题描述】：

这个例子我可以看到属性。

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 ();

【问题讨论】：

标签： html svg jquery-svg

【解决方案1】：

您需要在多边形元素上创建附加属性，而不是创建路径元素子元素并在其上设置属性，例如

    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");

【讨论】：