如何在svg中創建圓角

Question

我想爲我的svg路徑創建圓角，但我無法使其工作。 有沒有一個很好的方法來實現這一點？這裏是我的代碼：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"> 
 
    <clipPath id="svgClip"> 
 
    <path id="svgPath" d="M3,474 L957,471 942,24 40,1 z" /> 
 
    </clipPath> 
 
    <path id="svgMask" d="M3,474 L957,471 942,24 40,1 z" /> 
 
</svg>

謝謝！

Answer 1

您可以使用stroke-linejoin="round"並選擇合適的stroke-width。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="-100 -100 1200 1000"> 
 
    <path id="svgMask" d="M3,474 L957,471 942,24 40,1 z" stroke-linejoin="round" stroke="black" stroke-width="80"/> 
 
</svg>

Answer 2

有沒有自動或簡單的方法來做到這一點的路徑。您可以爲<rect>元素提供r（半徑）屬性，但<path>沒有等效。

您需要在路徑的相應位置計算並添加三次貝塞爾路徑命令（C或c）。