html – stroke not rendering on image from javascript-ThrowExceptions

Exception or error:

I am trying to work out why the setAttribute stroke of rect (below from code) is not working no matter what I do – either stroke-width or the color I am setting it is not working. Have I added it incorrectly? I made the background of rect grey so that at least I can see it on the image, but it is supposed to be white with a black outline. Thanks, Matt

    <svg id="mysvg" height="310" width="600">


    <text x="300" y="190" fill="#FF9900"
    font-family="Arial, Helvetica, sans-serif"
    text-anchor="middle"
    font-size="28">TO TARGET</text>

    <script type="application/ecmascript">
      <![CDATA[

        var mysvg = document.getElementById("mysvg");

        var metric_data = 0.17

        var gridWidth = 500;

        var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            rect.setAttribute("x", "50");
            rect.setAttribute("y", "50");
            rect.setAttribute("rx", "30");
            rect.setAttribute("ry", "30");
            rect.setAttribute("width", gridWidth);
            rect.setAttribute("height", "50");
            rect.setAttribute("style","stroke:black");
            rect.setAttribute("style", "stroke-width:5");
            rect.setAttribute("style","fill:grey");

        var perform = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            perform.setAttribute("x", "59");
            perform.setAttribute("y", "59");
            perform.setAttribute("rx", "18");
            perform.setAttribute("ry", "18");
            perform.setAttribute("width", gridWidth * metric_data);
            perform.setAttribute("height", "32");
            perform.setAttribute("style","fill:white");

            var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
            label.setAttribute("x", "300");
            label.setAttribute("y", "160");
            label.setAttribute("style", "fill:#FF9900");
            label.setAttribute("font-family", "Arial, Helvetica, sans-serif");
            label.setAttribute("font-size","42");
            label.setAttribute("text-anchor","middle");

        var txt = document.createTextNode((metric_data*100) + "%");
            label.appendChild(txt);

            mysvg.appendChild(rect);
            mysvg.appendChild(perform);
            mysvg.appendChild(label);


  ]]>
  </script>
  </svg>
How to solve:

Well we have…

rect.setAttribute("style","stroke:black");

Then this

rect.setAttribute("style", "stroke-width:5");

which replaces the black stroke style with a stroke-width of none. You seem to think this would add, it won’t. The stroke will revert to the default stroke of none.

rect.setAttribute("style","fill:grey");

And then we overwrite the stroke-width style with a grey fill so that’s all we’re left with. The stroke is still none and the stroke-width is now 1.

Try this instead

rect.setAttribute("stroke", "black");
rect.setAttribute("stroke-width", "5");
rect.setAttribute("fill", "grey");

Leave a Reply

Your email address will not be published. Required fields are marked *