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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With