SVG - 如何填充其邊從貝塞爾曲線形成的多邊形？

Question

我不想使用一D3弦或類似功能來創建類似下面使用純SVG但。

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

任何想法，其中分組可以幫助？

Answer 1

如果您想填寫該地區，則只能使用一個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如果你想玩弄路徑數據，看看鏈接是如何工作的。