Svg多邊形舍入

我正在使用svg移動/旋轉/縮放功能的應用程序。我正在編程Laravel的後端，前端使用html/css/javascript。我在網絡上看到，折線可能有某種立方貝塞爾。Svg多邊形舍入

現在我的問題是，如果一個多邊形svg元素可能具有與此example中的折線相同的立方貝塞爾。

什麼SVG的結構看起來就像是：

<svg> 
    <g data-type="track"> 
     <polygon class="track" points="2588,851 2537,1157 1796,916 1117,723 0,382 40,80 816,314 1885,638 1887,634"></polygon> 
     <polygon class="track" points="114,19 73,0 17,497 46,485"></polygon> 
    </g> 
</svg>

是否有可能給多邊形元素三次貝塞爾，以便它可以創建一個流體多邊形，而不是方形無圓角多邊形。

來源

2015-12-21 John doe

問題：「有可能嗎」答案：「是」 –

我該怎麼做呢？ –

我在谷歌搜索了兩個小時。所以我的迴應是來到這裏。 –

我認爲這裏的一些迴應有些混亂。

（是）可能的多邊形SVG元素具有相同的立方貝塞爾以它爲折線

簡短的答案是否定的。 <polygon>（和<polyline>）元素總是呈現爲您提供的座標之間的一系列直線段。沒有辦法自動使連接有一個半徑 - 就像HTML border-radius。如果那是你所問的。

如果該行具有較大的筆畫寬度，則可以選擇將圓角連接線的外角四捨五入。

.track { 
 
    fill: none; 
 
    stroke: black; 
 
    stroke-width: 20; 
 
} 
 

 
.round { 
 
    stroke-linejoin: round; 
 
}

<svg width="300" height="300"> 
 
    <polygon class="track" points="20,20 290,20 290,130 20,130"></polygon> 
 
    <polygon class="track round" points="20,170 290,170 290,280 20,280"></polygon> 
 
</svg>

如果你想在你的「線」貝塞爾曲線段，你將不得不使用<path>元素來代替。正如您鏈接到的示例中所用的那樣。

來源

2015-12-22 14:08:01

多邊形並不使用三次Bézier曲線，而是一條路徑。鏈接的示例不使用任何多邊形，而是包含這些曲線的路徑。

折線與多邊形之間的區別僅僅在於後者是封閉的，所以您可以簡單地創建一個路徑並關閉它（隱式或顯式地）。

除此之外，我不確定你的實際問題是什麼。

來源

2015-12-21 16:28:13 jcaron

Svg多邊形舍入

回答

相關問題