如何用svg循環繪製貝塞爾曲線？

所以我知道繪製貝塞爾曲線使用：如何用svg循環繪製貝塞爾曲線？

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

，但我想提醒他們在環（未動畫），每次改變自己的位置，它的每一個，但時間difrent將是同樣的曲線開始和結束的位置。我不知道如何改變循環中的這些屬性。

從波紋管回答我嘗試了我的代碼，但它不工作。我知道我做錯了什麼，但我不知道是什麼。以下是我的代碼：

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只是爲了測試它是否工作，所以我犯了錯誤？

來源

2013-10-14 Jake

您的代碼至少有三個錯誤。使用瀏覽器開發工具和控制檯來幫助您找到它們。在你設置'attr'的行中有一個。在你設置「d」的行中有一個。最後，你設置一個隨機筆畫顏色的方式將不起作用。 –

你可以recontruct字符串：

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

這並不總是產生有效筆畫SYNT儘管偶爾它會這樣做，你會看到一些輸出。

瀏覽器將在其錯誤/ Web控制檯中報告這些問題，因此您應該嘗試利用該功能。

來源

2013-10-14 14:17:46

你能爲第一個解決方案寫出完整的代碼嗎？我的意思是你知道的代碼會繪製曲線。我試圖執行它，但它不工作，我不能粘貼我的代碼在這裏爲未來7 haurs – Jake

是啊@羅伯特，你爲什麼要讓OP做這項工作？爲他寫所有的代碼，他是一個忙碌的人。 – MrMisterMan

沒有多數民衆贊成我沒有什麼（thx諷刺）我不想讓你爲我寫，但我嘗試這種解決方案，它不工作。我知道我沒有做對，但我不知道我犯了什麼錯誤。這就是爲什麼我要求幫助。 – Jake

如何用svg循環繪製貝塞爾曲線？

回答

相關問題