Question

我有以下Inkscape中生产的SVG，它具有Pacman图形（id=pacman）和路径（id=trajectory）。目的是使人物沿着路径移动。

将图像保存到文件后，我通过在“吃豆人”图中添加以下部分来对其进行编辑：

      <animateMotion
         path="m 39.645298,114.12279 c 24.797657,0.79422 33.02086,-32.601373 61.073142,-32.542731 27.55775,0.05761 37.28264,-38.721653 63.91959,-39.287919"
         begin="2s"
         dur="10s"
         repeatCount="indefinite"
         rotate="auto" />

从trajectory对象复制路径坐标。结果，我得到了这个文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<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="165.06496mm"
   height="104.70296mm"
   viewBox="0 0 165.06496 104.70296"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.3 (2405546, 2018-03-11)"
   sodipodi:docname="clean-animation.svg">
  <defs
     id="defs2" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1.4"
     inkscape:cx="343.91864"
     inkscape:cy="205.09936"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:window-width="1920"
     inkscape:window-height="1005"
     inkscape:window-x="-9"
     inkscape:window-y="1071"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-19.575883,-23.159755)">
    <path
       style="opacity:0.597;fill:#ffff00;fill-opacity:1;stroke:#008000;stroke-width:0.26458332;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:0.26458331, 0.52916662999999997;stroke-dashoffset:0;stroke-opacity:0.8"
       id="pacman"
       sodipodi:type="arc"
       sodipodi:cx="33.408691"
       sodipodi:cy="115.25672"
       sodipodi:rx="13.698855"
       sodipodi:ry="12.473214"
       sodipodi:start="0"
       sodipodi:end="5.9207142"
       d="m 47.107547,115.25672 a 13.698855,12.473214 0 0 1 -12.459194,12.42204 13.698855,12.473214 0 0 1 -14.714154,-10.1738 13.698855,12.473214 0 0 1 9.796115,-14.26337 13.698855,12.473214 0 0 1 16.487129,7.59231 l -12.808752,4.42282 z"
       inkscape:label="#path815">
      <animateMotion
         path="m 39.645298,114.12279 c 24.797657,0.79422 33.02086,-32.601373 61.073142,-32.542731 27.55775,0.05761 37.28264,-38.721653 63.91959,-39.287919"
         begin="2s"
         dur="10s"
         repeatCount="indefinite"
         rotate="auto" />
    </path>
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 39.645298,114.12279 c 24.797657,0.79422 33.02086,-32.601373 61.073142,-32.542731 27.55775,0.05761 37.28264,-38.721653 63.91959,-39.287919"
       id="trajectory"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="csc"
       inkscape:label="#path817" />
  </g>
</svg>

问题是动画不起作用。根据{{1}}的定义，两秒钟后，黄色数字便消失了。

我的第一个猜想是坐标以某种方式偏移了，并且吃豆人形状在外太空的某个位置具有动画效果。但是，如果是这种情况，那么我会在每个循环开始时看到形状恢复片刻。

当我尝试各种教程中发现的手写SVG时，它们会起作用。但是，我自己在Inkscape中制作的照片的行为却不符合预期。

这是什么原因，如何纠正？

Answer 1

为了了解会发生什么，请在svg元素中添加overflow:visible。您会看到打包员想知道远离路径的地方

在下一个示例中，我将您的背包客换了一个圈。圆的路径围绕点{x：0，y：0} 为中心。您应该重写packman的路径，以使其始于svg元素的原点。

svg{border:1px solid;}

<svg width="165.06496mm"
   height="104.70296mm"
   viewBox="0 0 165.06496 104.70296"
   id="svg8">
  <g id="layer1" >
    <path
       style="opacity:0.597;fill:#ffff00;fill-opacity:1;stroke:#008000;stroke-width:0.26458332;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:0.26458331, 0.52916662999999997;stroke-dashoffset:0;stroke-opacity:0.8"
       id="pacman"
       d="M-12.5,0A12.5 12.5 0 0 1 12.5,0A12.5 12.5 0 0 1 -12.5,0">
      <animateMotion
         path="m20.07, 90.96 c24.798, 0.794 33.021, -32.601 61.073, -32.543 c27.558, 0.058 37.283, -38.722 63.920, -39.288 1 27.55775,0.05761 37.28264,-38.721653 63.91959,-39.287919"
         begin="2s"
         dur="10s"
         repeatCount="indefinite"
         rotate="auto" />
    </path>
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m20.07, 90.96 c24.798, 0.794 33.021, -32.601 61.073, -32.543 c27.558, 0.058 37.283, -38.722 63.920, -39.288 "
       id="trajectory" />
  </g>
</svg>

无法沿Inkscape中生成的路径设置SVG动画

1 个答案: