svg animation - icon not scale center point of icon

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.

Solution

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)