用svg和javascript創建圈子

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>

示例小提琴

_{我還調整了你的尺寸僅僅是一個測試，它們非常大。}

用svg和javascript創建圈子

問題描述

1 個解決方案

解決方案1
5 已采納 2014-04-06 14:34:31

用svg和javascript創建圈子

問題描述

1 個解決方案

解決方案1 5 已采納 2014-04-06 14:34:31

解決方案1
5 已采納 2014-04-06 14:34:31