JavaScript动态地制作SVG是行不通的，为什么

Question

所以我写了这个简单的脚本，它从输入中读取值并使用它们动态构建条形图，但由于某种原因，脚本不起作用'有什么想法吗？

 <figure id="fg1">
     <input type="hidden" id="myText" value ="10 20 30 15 40 5" />
     <figcaption ><br/>Activity Graph </figcaption >
  </figure>
<script>
    var str = document.getElementById("myText").value;
    var res = str.split(" ");
    var s = "<svg id="svg1">";
 for (i=0 ; i < res.length; i++) {
    var cx = i*20;
   s+="<rect class="hist" " +"x=""+cx+"+"width="20""+"height=""+res[i]*20+" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />";
}
s+="</svg>";
$('s').appendTo("#fg1");
</script>

Answer 1

不要引用变量。这使它成为一个字符串，因此它在 DOM 中选择一个<s>标签。

$(s).appendTo("#fg1");

Answer 2

动态创建 SVG 元素时，应使用 document.createElementNS(namespaceUri, elementName) 方法，因为它们不是 HTML 标记。

例如，要创建一个<rect>节点，您应该使用：

var el = document.createElementNS("http://www.w3.org/2000/svg" ,"rect"); 

然后你可以用svg.appendChild(el) .

Answer 3

你不能使用普通的jQuery来创建SVG元素。 jQuery在默认（HTML）命名空间中创建元素。 SVG 元素必须位于 SVG 命名空间中。 尝试改用 jQuery.SVG 插件。

或者按照安德烈亚斯的建议，使用createElementNS()自己单独创建元素。