镜像SVG中的路径

Question

我想使用路径在SVG中编写圣诞树.

我开始编写树的左半部分的路径,现在我想沿y轴镜像这些点以创建右半部分.我在许多变体中尝试过scale命令,但它根本不起作用.:/有人可以帮我这个吗？

这是我的代码:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

    <svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">

    <path style="stroke:green;fill:none;
                    stroke-width:10;"
                    d="M1000,200 Q950,400 800,500 Q600,600 750,650 T700,850 Q400,1100 600,1100 T500,1400   Q250,1600 450,1600 L850,1600 Q950,1600 950,1700"/>

    <path transform="translate(350)" style="stroke:green;fill:none;
                    stroke-width:10;"
                    d="M1000,200 Q950,400 800,500 Q600,600 750,650 T700,850 Q400,1100 600,1100 T500,1400 Q250,1600 450,1600 L850,1600 Q950,1600 950,1700"/>

    </svg>

现在怎么样:http://www.bilderload.com/bild/272965/istFI270.jpg

应该如何看待:http://www.bilderload.com/bild/272964/soll399GL.jpg

Answer 1

使用 transform="translate(2000), scale(-1, 1)"

<svg width="200" height="200">
     <g transform="scale(.1)">

    <path style="stroke:green;fill:none;
                    stroke-width:10;"
                    d="M1000,200 Q950,400 800,500 Q600,600 750,650 T700,850 Q400,1100 600,1100 T500,1400   Q250,1600 450,1600 L850,1600 Q950,1600 950,1700"/>

    <path transform="translate(2000), scale(-1, 1)" style="stroke:green;fill:none;
                    stroke-width:10;"
                    d="M1000,200 Q950,400 800,500 Q600,600 750,650 T700,850 Q400,1100 600,1100 T500,1400 Q250,1600 450,1600 L850,1600 Q950,1600 950,1700"/>
    
    </g>
</svg>

原来在jsFiddle