正文

svg绘制多少个点

设计者
设计者 V管理员 /5阅读/0评论
0426

SVG绘图入门：如何绘制指定数量的点

svg绘制多少个点

在SVG（可缩放矢量图形）绘制中，绘制特定数量的点是一个基础且实用的技能。以下是一些常见的问题及解答，帮助您更好地理解如何在SVG中绘制指定数量的点。

问题一：如何在SVG中绘制10个点？

在SVG中绘制10个点，您可以使用``元素，并通过设置`cx`和`cy`属性来指定每个点的位置。以下是一个简单的例子，展示了如何绘制10个等距分布的点：

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">

  <g>

    <circle cx="50" cy="50" r="10" fill="red" />

    <circle cx="150" cy="50" r="10" fill="red" />

    <circle cx="250" cy="50" r="10" fill="red" />

    <circle cx="350" cy="50" r="10" fill="red" />

    <circle cx="50" cy="150" r="10" fill="red" />

    <circle cx="150" cy="150" r="10" fill="red" />

    <circle cx="250" cy="150" r="10" fill="red" />

    <circle cx="350" cy="150" r="10" fill="red" />

    <circle cx="50" cy="250" r="10" fill="red" />

    <circle cx="150" cy="250" r="10" fill="red" />

    <circle cx="250" cy="250" r="10" fill="red" />

    <circle cx="350" cy="250" r="10" fill="red" />

  </g>

</svg>

问题二：如何使SVG中的点动态变化数量？

function drawCircles(number) {

  var svgNS = "http://www.w3.org/2000/svg";

  var svg = document.createElementNS(svgNS, "svg");

  svg.setAttribute("width", "400");

  svg.setAttribute("height", "400");

  for (var i = 0; i < number; i++) {

    var circle = document.createElementNS(svgNS, "circle");

    circle.setAttribute("cx", (i % 4)  100 + 50);

    circle.setAttribute("cy", Math.floor(i / 4)  100 + 50);

    circle.setAttribute("r", 10);

    circle.setAttribute("fill", "red");

    svg.appendChild(circle);