html - how - svg scale css
Reflejando un camino en SVG (2)
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
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:
Usa transform="translate(2000), scale(-1, 1)"