如何避免 svg 变形过渡中损坏的 svg 路径？答案

【问题标题】：How do i avoid the mangled svg path in the svg morph transition?如何避免 svg 变形过渡中损坏的 svg 路径？
【发布时间】：2021-11-30 10:33:48
【问题描述】：

我在inkscape中创建了以下svg

<?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="345.70975"
   height="352.91309"
   viewBox="0 0 91.469035 93.374923"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.2 5c3e80d, 2017-08-06"
   sodipodi:docname="double-square.svg">
  <defs
     id="defs2" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.70710678"
     inkscape:cx="226.41877"
     inkscape:cy="36.880616"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     units="px"
     inkscape:pagecheckerboard="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:window-width="1440"
     inkscape:window-height="801"
     inkscape:window-x="0"
     inkscape:window-y="1"
     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></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-21.120772,-24.484056)">
    <path
       style="opacity:1;fill:none;fill-opacity:1;stroke:#800080;stroke-width:1.29393971;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       d="m 22.242817,24.963907 h 89.459313 c 0.10307,0 0.18605,0.08678 0.18605,0.194558 v 92.051005 c 0,0.10779 -0.0829,0.19456 -0.18605,0.19456 H 22.242817 c -0.103073,0 -0.186053,-0.0867 -0.186053,-0.19456 V 25.158465 c 0,-0.107785 0.08299,-0.194558 0.186053,-0.194558 z"
       id="rect818"
       inkscape:connector-curvature="0" />
    <path
       style="opacity:1;fill:none;fill-opacity:1;stroke:#ff0000;stroke-width:1.31637728;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       d="m 96.672725,103.80812 c -22.695046,9.46462 -52.584739,24.28389 -62.190302,0.78977 -9.605563,-23.494119 -20.853186,-57.321821 1.841865,-66.786436 22.695046,-9.464613 57.771554,-23.161339 67.377122,0.332775 9.60556,23.494112 15.66636,56.199275 -7.028685,65.663891 z"
       id="path815"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="sssss" />
  </g>
</svg>

现在，当我使用anime.js 将此svg 从正方形变形为圆角正方形时，我看到正方形被破坏了很多，并且过渡到正方形不太正确。

let shapes = [
    {
        d: "m 22.242817,24.963907 h 89.459313 c 0.10307,0 0.18605,0.08678 0.18605,0.194558 v 92.051005 c 0,0.10779 -0.0829,0.19456 -0.18605,0.19456 H 22.242817 c -0.103073,0 -0.186053,-0.0867 -0.186053,-0.19456 V 25.158465 c 0,-0.107785 0.08299,-0.194558 0.186053,-0.194558 z"
    },
    {
        d: "m 96.672725,103.80812 c -22.695046,9.46462 -52.584739,24.28389 -62.190302,0.78977 -9.605563,-23.494119 -20.853186,-57.321821 1.841865,-66.786436 22.695046,-9.464613 57.771554,-23.161339 67.377122,0.332775 9.60556,23.494112 15.66636,56.199275 -7.028685,65.663891 z"
    }
]



var morph1 = anime({
    targets: '.square-path',
    d: [
        {value: shapes[0].d},
        {value: shapes[1].d}
    ],
    duration: 3000,
    direction: 'alternate',
    autoplay: true,
    easing: 'linear',
    elasticity: 100,
    loop: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?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="345.70975"
   height="352.91309"
   viewBox="0 0 91.469035 93.374923"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.2 5c3e80d, 2017-08-06"
   sodipodi:docname="double-square.svg">
  <defs
     id="defs2" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.70710678"
     inkscape:cx="226.41877"
     inkscape:cy="36.880616"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     units="px"
     inkscape:pagecheckerboard="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:window-width="1440"
     inkscape:window-height="801"
     inkscape:window-x="0"
     inkscape:window-y="1"
     inkscape:window-maximized="1" />
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-21.120772,-24.484056)">
    <path
       style="opacity:1;fill:none;fill-opacity:1;stroke:#800080;stroke-width:1.29393971;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       d="m 22.242817,24.963907 h 89.459313 c 0.10307,0 0.18605,0.08678 0.18605,0.194558 v 92.051005 c 0,0.10779 -0.0829,0.19456 -0.18605,0.19456 H 22.242817 c -0.103073,0 -0.186053,-0.0867 -0.186053,-0.19456 V 25.158465 c 0,-0.107785 0.08299,-0.194558 0.186053,-0.194558 z"
       id="rect818"
       class="square-path"
       inkscape:connector-curvature="0" />
  </g>
</svg>

如何避免 svg 变形过渡中的错位方块？

【问题讨论】：

标签： svg anime.js svg-morphing

【解决方案1】：

确保您的两个形状具有相同数量的段和段类型。

这实际上是一个 SVG 规则，但我相信anime.js 可以通过修改路径来帮助您解决此规则，以便它们工作。但最好自己控制，而不是依靠程序来猜测你的意图。

您的起始路径有 8 或 9 个路径段：

m 22.242817,24.963907
h 89.459313
c 0.10307,0 0.18605,0.08678 0.18605,0.194558
v 92.051005
c 0,0.10779 -0.0829,0.19456 -0.18605,0.19456
H 22.242817
c -0.103073,0 -0.186053,-0.0867 -0.186053,-0.19456
V 25.158465
c 0,-0.107785 0.08299,-0.194558 0.186053,-0.194558
z

但你的最终路径只有四个：

m 96.672725,103.80812
c -22.695046,9.46462 -52.584739,24.28389 -62.190302,0.78977
c -9.605563,-23.494119 -20.853186,-57.321821 1.841865,-66.786436
c 22.695046,-9.464613 57.771554,-23.161339 67.377122,0.332775
c 9.60556,23.494112 15.66636,56.199275 -7.028685,65.663891
z

两个路径都应该有匹配的路径命令。例如，两个路径都应该是M H C V C H C V C Z，或者都应该是M C C C C Z。

安排你的路径点，使它们的位置靠近你希望它们以其他形状结束的位置。

例如，在圆到正方形的过渡中，使圆有四个点，并将这四个点定位在 NW、NE、SW 和 SE。

如果它们相对于其他形状处于随机位置，您将获得一个动画，该动画似乎将自身绑定到一个非然后解读。

在下面的示例中，两条路径正好有四个贝塞尔曲线路径命令 (c)。并且它们的端点位于另一个形状上的相应位置附近。请注意，即使是正方形的直线，我也使用了曲线路径命令 (C)。您可以使曲线看起来笔直，但不能使直线弯曲。

let shapes = [
    {
        d: "M 20, 20 c 100,0 200,0 300,0 c 0,100 0,200 0,300 c -100,0 -200,0 -300,0 c 0,-100 0,-200 0,-300 z"
    },
    {
        d: "M 89.289322,89.289322 c 42.392448,-38.369033 104.952908,-35.372751 141.421358,0 39.05243,39.052428 39.05243,102.368928 0,141.421358 -39.05243,39.05243 -102.36893,39.05243 -141.421358,0 -39.05243,-39.05243 -39.052429,-102.36893 0,-141.421358 z"
    }
]



var morph1 = anime({
    targets: '.square-path',
    d: [
        {value: shapes[0].d},
        {value: shapes[1].d}
    ],
    duration: 3000,
    direction: 'alternate',
    autoplay: true,
    easing: 'linear',
    elasticity: 100,
    loop: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg
   width="345.70975"
   height="352.91309"
   viewBox="0 0 340 340"
   id="svg8">
  <g
     id="layer1">
    <path
       style="opacity:1;fill:none;fill-opacity:1;stroke:#800080;stroke-width:1.29393971;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       d="M 20, 20 c 100,0 200,0 300,0 c 0,100 0,200 0,300 c -100,0 -200,0 -300,0 c 0,-100 0,-200 0,-300 z"
       id="rect818"
       class="square-path" />
  </g>
</svg>

【讨论】：

请给我一些时间来理解并暂时接受 +1 :) 非常感谢
你怎么知道哪个点是哪个 I.E.点 1 或 2 点和 3 点，这样你就知道哪一个对应于你想要转换的形状时对应的！ :) 你也在inkscape中创建了这个圈子吗？
嗯.. 我不再记得示例中的路径来自何处。文本中的那个来自您的代码。但我不记得为什么演示中的那个不同了。
有一种方法可以在 Inkscape 中找到您的点的顺序。选择节点工具后，您可以使用 Tab 围绕路径的点循环。此外，第一个节点/点将用一个小圆圈标记。
谢谢，很有帮助！ :)