如何在SVG中的路徑上計算漸變圓角邊框

Question

我試圖在SVG中的線性曲線邊框後面創建路徑。有點像這樣：

我想知道這可怎麼在SVG路徑語法計算？我嘗試了一些選擇，但沒有接近任何地方。

爲了記錄，我使用Raphael.js - 但問題是通用的，因爲Raphael不會在svg路徑聲明中包裝API。

Answer 1

您希望爲此設置elliptical arc curve command。

var paper = Raphael(0, 0, 500, 500); 
var rx = 35, 
    ry = 25; 
var path = "M20,20v100a" + rx + "," + ry + " 90 0,0 " + ry + "," + rx; 
paper.path(path); 

fiddle

拉斐爾的.rect()方法允許在彎道半徑，以及如果你需要做一個矩形。