如何计算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

如果你需要制作一个矩形，Raphael的.rect()方法也允许角的半径。