Question

（更新）我有一些关于svg和javascript的问题。我想要创建的是一系列相互重叠的圆圈，每次循环旋转时，它们的半径（r）值增加一，这样就可以创建某种模式。这是我到目前为止（对于循环值来自另一个论坛帖子，我宁愿用一个会执行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>

那里有任何帮助吗？感谢。

Answer 1

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

您附加到circle元素，但应附加到svg-container。圆元素没有子元素。
您没有为圈子设置任何样式，因此它们是透明的。
圆形元素中的坐标称为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

_{我还调整了您的尺寸，仅仅进行了测试，它们非常大。}

用svg和javascript创建圈子

1 个答案: