用 svg 和 javascript 创建圈子答案

【问题标题】：creating circles with svg and javascript用 svg 和 javascript 创建圈子
【发布时间】：2014-05-18 15:22:42
【问题描述】：

（已更新）我遇到了一些关于 svg 和 javascript 的问题。我想要创建的是一系列相互叠加的圆圈，每次循环旋转时，它们的半径 (r) 值都会增加一个，以便创建某种模式。这是我目前所拥有的（for 循环值来自另一个论坛帖子，我宁愿使用执行 10 次的 while 循环） -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dynamic SVG!</title>
</head>
<defs>
    <svg height="10000" width="10000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <circle id="cir1" cx="300" cy="300" r="40" stroke="yellow" stroke-width="" fill="none"/>
</svg>
</defs>
<script>
   var svgns = "http://www.w3.org/2000/svg";
   for (var x = 0; x < 5000; x += 50) {
       for (var y = 0; y < 3000; y += 50) {
          var circle = document.createElementNS(svgns, 'circle');
          circle.setAttributeNS(null, 'x', x);
          circle.setAttributeNS(null, 'y', y);
          circle.setAttributeNS(null, 'height', '50');
          circle.setAttributeNS(null, 'width', '50');
          document.getElementById('cir1').appendChild(circle);
        }
   }
</script>
<body>
</body>
</html>

有什么帮助吗？谢谢。

【问题讨论】：

你的代码有很多语法错误。我建议你使用控制台来检查你的错误。
我是用 Jedit 写的，所以没有控制台调试。
在任何浏览器中打开您的页面并打开它的开发人员工具（现在大多数浏览器都使用 F12）。在那里你会有一个控制台，它会显示错误。
根据 firefox 控制台，这段代码现在没有错误，但是屏幕上什么也没有出现，请帮忙，我现在很困惑 :(
我找到了所有错误并修复了它们，但屏幕上没有显示任何内容。我还找到了这个论坛帖子 - stackoverflow.com/questions/12786797/… 这就是我想要做的，但我希望每次迭代都将 10 添加到圆半径中，我将如何将它用于我的？谢谢。

标签： javascript dom svg

【解决方案1】：

好的，这就是我必须解决的问题才能让您的代码正常工作：

您附加到圆形元素，但应该附加到 svg 容器。圆形元素没有子元素。
您没有为圆圈设置任何样式，因此它们是透明的。
圆元素中的坐标称为cx 和cy，而不是x 和y。
<defs> 元素应该是<svg> 元素的子元素。此外，其中的所有内容都不会被渲染。

JavaScript

var svgns = "http://www.w3.org/2000/svg",
    container = document.getElementById( 'cont' );
for (var x = 0; x < 500; x += 50) {
    for (var y = 0; y < 300; y += 50) {
        var circle = document.createElementNS(svgns, 'circle');
        circle.setAttributeNS(null, 'cx', x);
        circle.setAttributeNS(null, 'cy', y);
        circle.setAttributeNS(null, 'r', 50);
        circle.setAttributeNS(null, 'style', 'fill: none; stroke: blue; stroke-width: 1px;' );
        container.appendChild(circle);
    }
}

HTML

<svg id="cont" height="1000" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle id="cir1" cx="300" cy="300" r="40" stroke="yellow" stroke-width="" fill="none" />
</svg>

Example Fiddle

_{我还调整了你的尺寸，作为一个测试，它们很大。}

【讨论】：

谢谢！我从这里的另一个例子中取出了 for 循环。我将如何修改 for 循环，使其不改变圆的位置（cx，cy），而只是改变半径？
@user2324169 放入常量，在其中设置 cx 和 cy 并设置由循环变量更改的 r 值。
请注意，似乎有一个小错字，代码定义了一个变量容器但没有使用它。它直接进入 document.cont 元素。不过，这不会改变解决方案:-)
@JulianPollak 谢谢。尽管如此，还是解决了这个问题。