javascript - 垂直翻转 Raphael SVG 形状

Question

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

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

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

Answer 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/