笔划未在来自javascript的图像上呈现

我试图弄明白为什么无论我做什么，rect的setAttribute笔划（下面是代码）都不起作用——笔划宽度或我设置的颜色都不起作用。我加错了吗？我制作了矩形灰色的背景，这样至少我可以在图像上看到它，但它应该是白色的，带有黑色的轮廓。谢谢，马特

    <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>

瞄准

我们有

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

那么这个

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

将黑色笔划样式替换为笔划宽度为“无”。你似乎认为这会增加，但不会。笔划将恢复为默认笔划“无”

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

然后我们用灰色填充覆盖笔划宽度样式，这就是我们剩下的所有内容。笔划仍然为“无”，笔划宽度现在为1

试试这个

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

---

没错，谢谢你说得很清楚-我相信它添加了更多的

style=style+extra

，现在更清楚了，谢谢你不知道为什么要创建这样的SVG，你看过Snap.SVG吗？可能比javascript更干净，但可能不能像这样内联。我使用数据集作为工具的一部分来创建可视化-当它将数据转换为度量时，它还使用该数据的图像来补充它们。到目前为止，我已经完成了25项工作，只是这个小小的模型让我感到困惑。我喜欢snap.svg的东西，并在其他可视化中使用了一些