Question

我想使用路径在SVG中编写圣诞树。

我开始编写树的左半部分的路径，现在我想沿y轴镜像这些点以创建右半部分。我在许多变体中尝试过scale命令，但它根本不起作用。：/有人可以帮我吗？

这是我的代码：

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

现在如何：http://www.bilderload.com/bild/272965/istFI270.jpg

外观如何：http://www.bilderload.com/bild/272964/soll399GL.jpg

Answer 1

使用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

Answer 2

猜猜你需要这个：

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

镜像SVG中的路径

2 个答案:

猜猜你需要这个：

截图：