Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 401
user1907238 Avatar asked Dec 16 '12 03:12

user1907238


Video Answer


1 Answers

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

Original on jsFiddle

like image 76
Wex Avatar answered Sep 21 '22 12:09

Wex