javascript - 垂直翻转Raphael SVG形状

我创建了一个fiddle，其中包含我的项目的一小部分。由于这是SVG中的轴，因此需要垂直反转该轴才能形成所需的图表。但是，当我在代码上使用transform时，如下所示：

    SVGpaper.path(s).attr({
      stroke: "000",
      "stroke-width": 3,
      transform: "s1,-1"
    });

从提琴中的同一点开始的两条线被分开了。谁能解释为什么会这样？我相信我没有错过任何论据。

最佳答案

我会尝试构建路径字符串，然后在循环外部添加并执行转换，如果我正确理解了您的要求之后...

for (var i = 0; i < dataline.length; i++) {
    var x1 = dataline[i].dataPoints[i].x,
        y1 = dataline[i].dataPoints[i].y;


    s += "M" + x1 + "," + y1;

    for (var j = 0; j < dataline[i].dataPoints.length; j++) {

        var x2 = dataline[i].dataPoints[j].x,
            y2 = dataline[i].dataPoints[j].y;
        s += " L" + x2 + "," + y2;
    }

}

SVGpaper.path(s).attr({
        stroke: "000",
        "stroke-width": 3,
        transform: 's1,-1 T150,0'
    });

在这里更新了jsfiddle http://jsfiddle.net/Qru24/8/