svg 动画 - 图标不缩放图标的中心点

Question

这是我的 svg 的代码，我正在制作像心跳一样的动画我的图标。但当我从 1 到 0 时，它不是比例中心。 这是代码：

    <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>

这是codepen链接： Codepen Link

让你知道，我在 svg 路径中​​有更多设计，所以我只放了这个，因为我只有这个图标有问题。

Answer 1

你能用CSS来执行这样的脉冲动作吗？如果使用它，你可以拥有

transform-box: fill-box 和 transform-align:center 用于 svg。

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

它有效。

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>

来源：svg rotate-animation (transform-origin)

Answer 2

SVG 从原点 (0,0) 缩放，但您可以做一些事情。

(1) 您可以将 PATH 重新定位为以原点为中心 - 这将涉及更改所有 PATH 坐标。

(2) 如果您不反对使用额外的 Javascript 库，您可以使用 GSAP（又名 TweenMax），它非常擅长为 SVG 制作动画：https://greensock.com/svg-tips

解决方案的CodePen：https://codepen.io/MSCAU/pen/qJryda

替换您的 SMIL 的新 JS 代码：

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

(3) 您还可以在 StackOverflow 上找到其他基于 SMIL 的解决方案，例如。 SVG Scale Animation from Center Point instead of Upper-Left Corner。我对这些不太熟悉，因为到目前为止我一直避免使用 SMIL，但它可能适合您当前的需求。