svg animation - icon not scale center point of icon

Question

svg animation - icon not scale center point of icon

138 Views Asked by Hassan Javed At 07 April 2025 at 01:28

This is the code of my svg, and i am making the animation like heartbeat my icon. but it's not scale center when i give from 1 to 0. This is the code:

    <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="91.5" y1="104.1582" x2="129.623" y2="104.1582">
        <stop offset="0" style="stop-color:#F99F1C" />
        <stop offset="1" style="stop-color:#EB6524" />
    </linearGradient>

    <path fill="url(#SVGID_2_)" d="M115.125,95.979c0,1.116-0.904,2.021-2.021,2.021l0,0c-1.116,0-2.021-0.905-2.021-2.021v-8.834
c0-1.116,0.905-2.021,2.021-2.021l0,0c1.116,0,2.021,0.905,2.021,2.021V95.979z M106.906,116.353c0.789-0.789,0.789-2.068,0-2.857
l0,0c-0.789-0.789-2.068-0.79-2.857,0l-6.247,6.246c-0.79,0.789-0.789,2.068,0,2.857l0,0c0.79,0.79,2.068,0.79,2.857,0
L106.906,116.353z M93.521,105.337c-1.115,0-2.021,0.904-2.021,2.021l0,0c0,1.116,0.905,2.021,2.021,2.021h8.834
c1.116,0,2.021-0.905,2.021-2.021l0,0c0-1.116-0.904-2.021-2.021-2.021H93.521z M100.66,91.51c-0.789-0.789-2.068-0.789-2.857,0l0,0
c-0.789,0.79-0.789,2.069,0,2.858l6.247,6.247c0.789,0.789,2.068,0.789,2.857,0l0,0c0.79-0.789,0.789-2.068,0-2.857L100.66,91.51z
 M129.031,94.368c0.789-0.789,0.789-2.068,0-2.857l0,0c-0.789-0.79-2.068-0.789-2.857,0l-6.246,6.246
c-0.789,0.789-0.789,2.068,0,2.857l0,0c0.789,0.79,2.068,0.789,2.857,0L129.031,94.368z" >
<animateTransform attributeName="transform" id="click1"
        type="scale"
        additive="sum"
        from="1 1"
        to="0 0"
        dur="2s"
        begin="0"
        repeatCount="indefinite"
    />
</path>

and this is codepen link: Codepen Link

let you know, i have more designs in svg path so i just put this one because of i got problem in this icon only.

Original Q&A

There are 2 best solutions below

MSC On 10 October 2018 at 07:02

SVGs scale from the origin (0,0) but there a few things you could do.

(1) You could reposition your PATH to be centered on the origin - which would involve changing all your PATH coordinates.

(2) If you're not averse to using an additional Javascript library, you could use GSAP (aka. TweenMax) which is very good at animating SVGs: https://greensock.com/svg-tips

CodePen of the solution: https://codepen.io/MSCAU/pen/qJryda

New JS code which replaces your SMIL:

var shape = document.getElementsByTagName('path')[0];
TweenMax.to(shape, 2, {scale: 0, transformOrigin:"50% 50%", yoyo: true, repeat: -1});

(3) There are also other SMIL-based solutions you will find on StackOverflow, eg. SVG Scale Animation from Center Point instead of Upper-Left Corner. I am less familiar with these as I've avoided SMIL so far, but it may suit your current needs.

**chintuyadavsara** · Accepted Answer

Can you use CSS to perform such pulse action? If it is used you can have

transform-box: fill-box and transform-align:center for the svg.

path{
  transform-box:fill-box;
  transform-origin:center;
}

and it works.

path{
  transform-box:fill-box;
  transform-origin:center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="223px" height="217px" viewBox="0 0 223 217" enable-background="new 0 0 223 217" xml:space="preserve">
<!-- Start Center Click -->
        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="91.5" y1="104.1582" x2="129.623" y2="104.1582">
            <stop offset="0" style="stop-color:#F99F1C" />
            <stop offset="1" style="stop-color:#EB6524" />
        </linearGradient>
  
        <path fill="url(#SVGID_2_)" d="M115.125,95.979c0,1.116-0.904,2.021-2.021,2.021l0,0c-1.116,0-2.021-0.905-2.021-2.021v-8.834
 c0-1.116,0.905-2.021,2.021-2.021l0,0c1.116,0,2.021,0.905,2.021,2.021V95.979z M106.906,116.353c0.789-0.789,0.789-2.068,0-2.857
 l0,0c-0.789-0.789-2.068-0.79-2.857,0l-6.247,6.246c-0.79,0.789-0.789,2.068,0,2.857l0,0c0.79,0.79,2.068,0.79,2.857,0
 L106.906,116.353z M93.521,105.337c-1.115,0-2.021,0.904-2.021,2.021l0,0c0,1.116,0.905,2.021,2.021,2.021h8.834
 c1.116,0,2.021-0.905,2.021-2.021l0,0c0-1.116-0.904-2.021-2.021-2.021H93.521z M100.66,91.51c-0.789-0.789-2.068-0.789-2.857,0l0,0
 c-0.789,0.79-0.789,2.069,0,2.858l6.247,6.247c0.789,0.789,2.068,0.789,2.857,0l0,0c0.79-0.789,0.789-2.068,0-2.857L100.66,91.51z
  M129.031,94.368c0.789-0.789,0.789-2.068,0-2.857l0,0c-0.789-0.79-2.068-0.789-2.857,0l-6.246,6.246
 c-0.789,0.789-0.789,2.068,0,2.857l0,0c0.789,0.79,2.068,0.789,2.857,0L129.031,94.368z" >
 <animateTransform attributeName="transform" id="click1"
   type="scale"
   additive="sum" 
   from="1 1"
   to="0 0"
   dur="1s"
   begin="0"
   repeatCount="indefinite"
  />
 </path>
    </svg>
</body>
</html>

Source: svg rotate-animation (transform-origin)

svg animation - icon not scale center point of icon

There are 2 best solutions below

Related Questions in SVG

Related Questions in ANIMATETRANSFORM

Trending Questions

Popular # Hahtags

Popular Questions