svg - 如何在 SVG 中计算路径上的渐变圆角边框

Question

我正在尝试在 SVG 中创建沿线性弯曲边框的路径。有点像这样：

我想知道如何在 SVG 路径语法中计算它？我尝试了一些选择，但还没有接近。

作为记录，我使用的是 Raphael.js - 但问题是通用的，因为 Raphael 不会围绕 svg 路径声明包装 API。

Answer 1

为此，您需要椭圆弧曲线命令。

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);

小提琴

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