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

フィドル

ラファエルの.rect()方法では、長方形を作成する必要がある場合、角の半径も考慮されます。