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

SVG从原点（0,0）开始缩放，但是您可以做一些事情。

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

（2）如果您不反对使用其他Javascript库，则可以使用GSAP（又名TweenMax），它非常适合动画SVG：https://greensock.com/svg-tips

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

新的JS代码取代了您的SMIL：

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，但是它可能适合您当前的需求。

Answer 2

您可以使用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动画-图标无法缩放图标的中心点

2 个答案: