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

Question

所以我知道要绘制贝塞尔曲线，您可以使用：

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`s只是为了测试它是否有效，所以我哪里出错了？？？

Answer 1

你可以重新构造字符串：

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 控制台中报告这些问题，因此您真的应该尝试利用它。