創建帶圓角的三角形的SVG路徑

Question

我想創建一個帶圓角的三角形的簡單svg路徑。

我已經從這個三角形開始：

<svg width="440" height="440"> 
 
    <path d="M5,100 L70,5 L135,100 z" fill="none" stroke="black" stroke-width="3" /> 
 
</svg>

但我努力在彎道加 - 這是據我已經有了：

<svg width="440" height="440"> 
 
    <path d="M5,100 a10,10 1 0 1 -5,-10 L70,5 L135,90 a10,10 1 0 1 5,10 z" fill="none" stroke="black" stroke-width="3" /> 
 
</svg>

用三個光滑拐角創建三角形的正確路徑座標是什麼？我是否需要做一些幾何來計算正確的strart和endpoints，或者是否有一種工具可以用來配置形狀，這會給我形狀的座標？

Answer 1

Inkscape可以將路徑的筆劃轉換爲填充物體。您可以：

1. 繪製一個簡單的三角形並將填充設置爲無。
2. 定義一個寬度爲您要實現的圓角半徑的兩倍的筆劃。
3. 設置stroke-linejoin:round（填充和描邊對話框 - >描邊樣式 - >圓連接）。
4. 從菜單中選擇Path - > Stroke to Path。

5. 設置爲節點選擇模式。現在您可以刪除內側的所有節點。

6. 將填充設爲無，然後根據自己的喜好選擇筆畫。