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

Question

I have the following 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>

I am using anime.js to do a scale animation but the svg seems to be also moving on both the x and y axis , i would not like this to happen. How can i stop this moving on the x and y axis and only keep the scale animation ?

Edit :-

1. I can't center the triangle as there are other elements on the canvas.

2. Have removed the matrix on the svg element and also trasformOrigin in the JS code but the issue still persists

Answer 1

you need to add transform-box: fill-box; to #el-shape's CSS.

transform-box defines the layout box to which the transform and transform-origin properties relate. Initially, it is set to view-box, which sets it to the nearest SVG viewport.

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.

When you set it to fill-box, The object bounding box is used as the reference box.

and now you can see it is working (you might need to scroll down a bit):

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>