使用 SVG 曲线模拟圆角

Question

我在 Raphael 中以 SVG 路径表示法绘制了一系列向后的“L”形 - 只是一组数据点，每个数据点由一条水平线表示，然后是一条垂直线，长度不一。

<div id="canvas"></div>​
<script>
    var data = [
        [{x: 32, y: 207}, {x: 50, y: 371}],
        [{x: 34, y: 209}, {x: 39, y: 34}],
        [{x: 32, y: 216}, {x: 58, y: 38}],
        [{x: 70, y: 221}, {x: 93, y: 40}],
        [{x: 89, y: 223}, {x: 105, y: 41}],
        [{x: 113, y: 225}, {x: 150, y: 42}],
        [{x: 132, y: 228}, {x: 173, y: 43}],
        [{x: 305, y: 230}, {x: 354, y: 45}]
    ],
        paper = Raphael("canvas", 400, 300),
        path;

    for (var c = 0; c < data.length; c += 1) {
        path = "M" + data[c][0].x + "," + data[c][0].y;
        path += "H" + data[c][1].x;
        path += "V" + data[c][2].y;
        paper.path(path).attr({"stroke": "#900", "stroke-width": 2})
    }
</script>

jsFiddle

我想给这些形状半径为 5 左右的圆角。我是否必须手动将水平线绘制到距离其目的地 5px 处，向上编程 PI/2 弧度的曲线，然后绘制垂直线的其余部分？

我希望有一种方法可以用一条小半径的 SVG 曲线做到这一点，这样形状就会一直沿直线前进，直到在其结束前不久然后向上弯曲——这正是圆角矩形的行为在拉斐尔或 CSS3 中。

我已经检查了SVG path guidelines，但在处理细节方面遇到了困难。

谢谢！

Answer 1

这应该可以解决问题（至少在示例中）：

http://jsfiddle.net/jYGrq/3/

改变这个

path += "H" + (data[c][1].x)

对此： path += "H" + (data[c][1].x-5);

并在其后添加以下行：

if (data[c][0].y > data[c][1].y) path += "s 5 0 5 -5";
else if (data[c][0].y < data[c][1].y) path += "s 5 0 5 5";

这涵盖了示例中的所有情况，但是如果您想在不考虑方向的情况下进行圆角，请多做一些 if。希望这会有所帮助。

顺便说一下，我假设速记相对三次（s）是最适合您的情况的曲线类型。