Question

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

    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/

垂直翻转拉斐尔SVG形状

1 个答案: