如何在 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() 方法还允许为角设置半径，如果您需要制作矩形。