Question

我正在努力动态地“挣扎”。使用Firebug创建SVG元素。这是一个jsfiddle示例也失败了。

<svg width="500" height="500">
     <circle id="c1" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
<div id="genR" onclick="genRect();" >Generate</div>  




function genRect () {
    var rect = document.createElementNS ("http://www.w3.org/2000/svg", "rect");
    var svg = document.getElementsByTagName ("svg")[0];
    console.log (rect);
    console.log (svg);
    rect.setAttribute ("width", "50");
    rect.setAttribute ("height", "50");
    rect.setAttribute ("fill", "#e11a51");
    rect.setAttribute ("stroke", "blue");
    rect.setAttribute ("x", "75");
    rect.setAttribute ("y", "150");
    svg.appendChild (rect);
}

谢谢，

Answer 1

找到原因。

使用此HTML：

<svg id="svnContainer" width="500" height="500">
    <circle id="c1" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<div id="genR" onclick="genRect();" >Generate</div>

使用此Javascript：

window.genRect = function() {
    var rect = document.createElementNS ("http://www.w3.org/2000/svg", "rect");
    var svg = document.getElementById('svnContainer');
    console.log (rect);
    console.log (svg);
    rect.setAttribute ("width", "50");
    rect.setAttribute ("height", "50");
    rect.setAttribute ("fill", "#e11a51");
    rect.setAttribute ("stroke", "blue");
    rect.setAttribute ("x", "75");
    rect.setAttribute ("y", "150");
    svg.appendChild (rect);
}

我在HTML中所做的更改可能没有必要，但是更安全，因为通过使用ID（应该是唯一的），您可以保证页面中没有其他元素具有相同的（如果您使用名字，你不能肯定）。

第二个更改（重要的一个是为了让它在jsfiddle上运行），是你定义函数的方式。你需要按照这篇文章的说明将其设为全局（原因是由于jsfiddle运行代码的方式）：JavaScript not running on jsfiddle.net

生成SVG形状

1 个答案: