14

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

4

2 回答 2

16

利用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 上的原创

于 2012-12-16T06:39:17.823 回答
0

猜你需要这个：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="2000"
   height="2000"
   id="svg2997"
   version="1.1"
   inkscape:version="0.48.2 r9819"
   sodipodi:docname="path.svg">
  <metadata
     id="metadata3007">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs3005" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1018"
     id="namedview3003"
     showgrid="false"
     inkscape:zoom="0.118"
     inkscape:cx="1000"
     inkscape:cy="1000"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg2997" />
  <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"
     id="path2999" />
  <path
     style="fill:none;stroke:#008000;stroke-width:10"
     d="m 1041.1111,1700 q 0,-100 100,-100 l 400,0 q 200,0 -50,-200 -300,-300 -100,-300 200,0 -100,-250 -200,-150 -50,-200 150,-50 -50,-150 -150,-100 -200,-300"
     id="path3001"
     inkscape:connector-curvature="0" />
</svg>

截屏：

于 2012-12-16T03:24:13.553 回答