SVG 缩放动画也导致转换和转换为动画（anime.js）

Question

我有以下 svg :-

anime({
    targets: '#el-shape',
    scale: [0, 1],
    easing: 'easeInOutSine',
    duration: 1000,
    loop: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<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="156.3371mm"
height="149.50702mm"
viewBox="0 0 156.3371 149.50702"
version="1.1"
id="svg8"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
sodipodi:docname="circle-check-mark-celebration-v2.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.49497475"
  inkscape:cx="103.78147"
  inkscape:cy="280.57194"
  inkscape:document-units="mm"
  inkscape:current-layer="layer1"
  showgrid="false"
  inkscape:window-width="1440"
  inkscape:window-height="801"
  inkscape:window-x="0"
  inkscape:window-y="1"
  inkscape:window-maximized="1"
  fit-margin-top="0"
  fit-margin-left="0"
  fit-margin-right="0"
  fit-margin-bottom="0" />
<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(-26.213772,-56.496415)">
 <path
    sodipodi:type="star"
    style="opacity:0.778;fill:red;fill-opacity:1;stroke:#80ff80;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
    id="el-shape"
    sodipodi:sides="3"
    sodipodi:cx="129.26785"
    sodipodi:cy="160.17261"
    sodipodi:r1="8.2896643"
    sodipodi:r2="4.1448326"
    sodipodi:arg1="0.42285393"
    sodipodi:arg2="1.4700515"
    inkscape:flatsided="false"
    inkscape:rounded="0"
    inkscape:randomized="0"
    d="m 136.82738,163.57439 -7.14266,0.72203 -7.14266,0.72203 2.94603,-6.54674 2.94603,-6.54673 4.19663,5.8247 z"
    inkscape:transform-center-x="-0.20729642"
    inkscape:transform-center-y="-0.91528581" />
</g>
</svg>

我正在使用 anime.js 制作比例动画，但 svg 似乎也在 x 轴和 y 轴上移动，我不希望这种情况发生。我怎样才能停止在 x 轴和 y 轴上移动并只保留比例动画？

编辑 :-

我无法将三角形居中，因为 canvas 上还有其他元素。
已删除 svg 元素上的 matrix 以及 JS 代码中的 trasformOrigin 但问题仍然存在

Answer 1

您需要将 transform-box: fill-box; 添加到 #el-shape 的 CSS。

transform-box 定义与 transform 和 transform-origin 属性相关的布局框。最初，它被设置为 view-box，这将它设置为最近的 SVG 视口。

With view-box, the nearest SVG viewport is used as the reference box. Suppose a viewBox attribute is specified for the SVG viewport creating element. In that case, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute, and the dimension of the reference box is set to the width and height values of the viewBox attribute.

当您将其设置为fill-box时，对象边界框将用作参考框。

现在您可以看到它正在运行（您可能需要向下滚动一点）：

anime({
    targets: '#el-shape',
    scale: [0, 1],
    easing: 'easeInOutSine',
    duration: 1000,
    loop: true
});

#el-shape {
  transform-box: fill-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<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="156.3371mm" height="149.50702mm" viewBox="0 0 156.3371 149.50702" version="1.1" id="svg8" inkscape:version="0.92.2 5c3e80d, 2017-08-06" sodipodi:docname="circle-check-mark-celebration-v2.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.49497475" inkscape:cx="103.78147" inkscape:cy="280.57194" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false" inkscape:window-width="1440" inkscape:window-height="801" inkscape:window-x="0" inkscape:window-y="1" inkscape:window-maximized="1" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" />
  <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(-26.213772,-56.496415)">
    <path sodipodi:type="star" style="opacity:0.778;fill:red;fill-opacity:1;stroke:#80ff80;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1; transform-origin: center;" id="el-shape" sodipodi:sides="3" sodipodi:cx="129.26785" sodipodi:cy="160.17261" sodipodi:r1="8.2896643" sodipodi:r2="4.1448326" sodipodi:arg1="0.42285393" sodipodi:arg2="1.4700515" inkscape:flatsided="false" inkscape:rounded="0" inkscape:randomized="0" d="m 136.82738,163.57439 -7.14266,0.72203 -7.14266,0.72203 2.94603,-6.54674 2.94603,-6.54673 4.19663,5.8247 z" />
  </g>
</svg>

SVG 缩放动画也导致转换和转换为动画（anime.js）

SVG scale animation also cause transformX and transformY to animate(anime.js)

javascript

anime.js