使用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"; 

這包括例如在所有情況下，但如果你想，儘管定向到圓角，讓更多的IFS。希望這有所幫助。

順便說一下，我假設相對立方（s）的速記是最適合您的情況的曲線類型。