0

この例では、属性を見ることができます。

jsFiddle コードはうまく機能します

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 コードがうまく機能しない

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

1 に答える 1

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");
于 2012-08-30T13:05:51.450 に答える