如何使用 svg 循环绘制贝塞尔曲线

How to draw Bezier Curves in loop with svg?

本文关键字：曲线 绘制 何使用 svg 循环      更新时间：2023-09-26

所以我知道要画贝塞尔曲线，你使用：

path.setAttributeNS(null, "d", "M5,5 C5,45 45,45 45,5"):

但是我想循环绘制它们（不是动画）并每次更改它们的位置，每次都是相同的曲线，但起点和终点位置不同。而且我不知道如何在循环中更改这些属性。

从下面的答案中，我尝试了我的代码，但它不起作用。我知道我做错了什么，但我不知道是什么。这是我修改后的代码：

for (var i = 0; i < 100; i++) {
var x1 = 10;
var x2 = 15;
var x3 = 20;
var x4 = 30;
var x5 = 40;
var x6 = 50;
var x7 = 60;
var x8 = 70;
var attr = "M" + x1 + "," + x2 + " " + "C" + x3 + "," + x4 + " " + x5 "," + x6 + " " + x7 + "," + x8;
var path = document.createElementNS(svgns, 'path');
path.setAttributeNS("d", attr);
path.setAttributeNS(null, "fill", "none");
path.setAttributeNS(null, 'stroke', '#'+Math.round(0xffffff * Math.random()).toString(16));
document.getElementById('svgOne').appendChild(path);
}

x只是为了测试它是否有效，所以我犯了错误???

你可以重新构造字符串：

var x1 = 5;
var x2 = 5;
var attr = "M" + x1 + "," + x2 + " C" + ...
path.setAttribute("d", attr);

或者使用 SVG DOM，这样如果您已经有一条贝塞尔曲线

var move = path.pathSegList.getItem(0);
var curve = path.pathSegList.getItem(1);

然后您可以使用SVGPathSegCurvetoCubicAbs接口来设置曲线属性，例如

curve.x = 5;
curve.y = 10;
curve.x1 = 20
curve.y1 = 15;
curve.x2 = 12;
curve.y2= 13;

在你的尝试中

var attr = "M" + x1 + "," + x2 + " " + "C" + x3 + "," + x4 + " " + x5 "," + x6 + " " + x7 + "," + x8;
                                                                      ^ missing + sign

和

path.setAttributeNS("d", attr);

setAttributeNS 需要 3 个参数，或者 setAttribute 需要 2 个参数。

path.setAttributeNS(null, 'stroke', '#'+Math.round(0xffffff * Math.random()).toString(16));

这并不总是产生有效的笔画语法，尽管偶尔会这样做，但有时您会看到一些输出。

浏览器会在其错误/Web 控制台中报告这些问题，因此您确实应该尝试利用它。

相关文章：