user1907238 user1907238 - 3 months ago 27
HTML Question

Mirroring a path in SVG

I want to code a Christmas tree in SVG using path.

I started with writing the path for the left half of the tree, now I want to mirror these points along the y-axis to create the right half. I tried the scale command in many variations but it doesn't work at all. :/ Can somebody help me with this?

Here's my code:

<!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>


How it is now: http://www.bilderload.com/bild/272965/istFI270.jpg

How it should look: http://www.bilderload.com/bild/272964/soll399GL.jpg

Wex Wex
Answer

Use transform="translate(2000), scale(-1, 1)"

http://jsfiddle.net/Wexcode/dFTtd/