我刚开始学习 SVG，想创建一个 for 循环来在我的 HTML 中绘制许多圆圈。是否可以按照我尝试的方式完成，或者我尝试做的是不可能的？
<html>
<body>
<h1>My first SVG for loop</h1>
<script type="text/javascript">
var circlex = 50;
var circley = 50;
for (var i = 0; i < 100; i++) {
<svg width="100" height="100">
<circle cx="circlex + 1" cy="circley + 1" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
};
</script>
</body>
</html>
最佳答案
那么近又那么远
你不能将 html 代码直接放入 JavaScript 中(那会很酷)
JavaScript 添加新元素的方式是通过 DOM 操作。
那么让我们看一下代码:
- 首先创建一个带有 xmlns 的空 SVG 文档(只需设置
xmlns="http://www.w3.org/2000/svg"，它在 99% 的时间内都有效)我们需要一个 ID 来选择元素。 - 在 JavaScript 中获取 SVG 元素:
document.getElementById("svg_circles")。这里我们使用我们在元素上设置的 ID 将其保存到一个变量。 - 在 for 循环中:创建一个圆元素:
var circle = document.createElementNS(NS, "circle");命名空间NS位于 1. 它是http://www.w3.org/2000/svg。这看起来很复杂，但却是必需的，而且是您必须记住的东西。 - 设置圆形属性:现在设置属性:我使用
.setAttribute()设置位置cx和cy。您可以尝试以不同的方式定位它们。 我还设置了大小r属性和填充(填充上的长行代码只是为了好玩，它会创建随机颜色) - 现在我们已经完成了圆圈，但 JavaScript 代码不知道将它们放在哪里。所以我们告诉它:
svgCircle.appendChild()将元素设置为我们的 SVG 文档的子元素。所以:svgCircle.appendChild(circle);其中 circle 是创建的 SVG 元素。
document.addEventListener("DOMContentLoaded", function(event) {
var circlex = 0;
var circley = 0;
var svgCircle = document.getElementById("svg_circles");
var NS = "http://www.w3.org/2000/svg";
for (var i = 0; i < 100; i++) {
var circle = document.createElementNS(NS, "circle");
console.log(circle);
circle.setAttribute("cx", circlex + i);
circle.setAttribute("cy", circley + i);
circle.setAttribute("r", 10);
circle.setAttribute("fill", "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")");
svgCircle.appendChild(circle);
};
});<svg id="svg_circles" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
</svg>关于javascript - 尝试制作一个 for 循环来绘制 SVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34201318/