html - how - svg scale css

Reflejando un camino en SVG

Question

Quiero codificar un árbol de Navidad en SVG usando path.

Comencé escribiendo la ruta de la mitad izquierda del árbol, ahora quiero reflejar estos puntos a lo largo del eje y para crear la mitad derecha. Probé el comando de escala en muchas variaciones, pero no funciona en absoluto. :/ ¿Puede alguien ayudarme con esto?

Aquí está mi código:

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

Cómo está ahora: http://www.bilderload.com/bild/272965/istFI270.jpg

Cómo debería verse: http://www.bilderload.com/bild/272964/soll399GL.jpg

Answer 1

Supongo que necesitas esto:

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

Captura de pantalla:

Answer 2

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

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