在 SVG 中镜像路径

Posted 2023-02-23

【中文标题】在 SVG 中镜像路径

【英文标题】：Mirroring a path in SVG

【发布时间】：2012-12-03 14:41:37

【问题描述】：

我想使用路径在 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   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

【问题讨论】：

作为第一个用户，给了+1。使用 InkScape 可以轻松做到这一点！

这是一项艰巨的功课。

【参考方案1】：

使用transform="translate(2000), scale(-1, 1)"

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

【讨论】：

我认为transform属性在每个transform项之间不应该有逗号：transform="translate(2000) scale(-1, 1)"

【参考方案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"
   
   
   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-
     inkscape:window-
     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>

截图：

【讨论】：

谢谢，它以一种方式解决了问题，但我被禁止使用编辑器..我必须通过转换命令来完成，否则我的作业将不会被接受..：/我以前在谷歌上搜索过，我唯一能找到的是适用于文本的缩放命令，但不适用于我的路径。你知道一个可以在这里工作的命令吗？

我正在使用 Notepad++.. 这是我唯一可以使用的程序。

“我被禁止使用编辑器”。但是你的老师同意你在网上找人帮你做作业吗？