2014-04-24 92 views
3

我不想使用一D3弦或類似功能來創建類似下面使用純SVG但SVG - 如何填充其邊從貝塞爾曲線形成的多邊形?

enter image description here

我能夠創建一個使用標準路徑元素用貝塞爾曲線SVG多邊形。但不知道如何用自定義顏色填充該多邊形。如何定義這個多邊形的邊界並設置填充屬性?

任何想法,其中分組可以幫助?

回答

4

如果您想填寫該地區,則只能使用一個path元素。您可以將貝塞爾曲線鏈接在一起,以便從最後一個結束時開始。然後,將Z添加到路徑數據的末尾以關閉路徑。

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300"> 
    <path d="M480 150 C 300 200, 200 150, 20 200 C 15 150, 15 150, 20 100 C 200 100, 300 150, 480 150 Z" stroke="black" fill="red"></path> 
</svg> 

如果你知道你的所有終點和控制點應該在哪裏,那就比製作單獨的路徑更困難。

這裏是FIDDLE如果你想玩弄路徑數據,看看鏈接是如何工作的。

+1

回答接受!非常感謝 :) – Dhwanit