如何在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()方法允许在弯道半径，以及如果你需要做一个矩形。