Question

所以我知道要绘制bezier曲线：

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));

这并不总是产生有效的笔划语法，虽然偶尔也会产生一些输出。

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

如何用svg在循环中绘制Bezier曲线？

1 个答案: