如何使用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));

這並不總是產生有效的筆畫語法，盡管偶爾會這樣做，但有時您會看到一些輸出。

瀏覽器會在他們的錯誤/網絡控制台中報告這些問題，所以你真的應該嘗試利用它。