SVG анимация - значок не масштабируется центральная точка значка - PullRequest
Новая
       39

SVG анимация - значок не масштабируется центральная точка значка

0 голосов
/ 10 октября 2018

Это код моего 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>

, а это ссылка на кодовый блок: Кодовая ссылка

сообщим вамУ меня есть больше проектов в пути SVG, так что я просто поставил этот, потому что у меня проблема только в этом значке.

Ответы [ 2 ]

0 голосов
/ 10 октября 2018

Можете ли вы использовать 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)

0 голосов
/ 10 октября 2018

SVGs масштабируются от начала координат (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) Есть также другие решения на основе SMIL, которые вы найдете в StackOverflow, например. SVG Scale Animation от центральной точки вместо верхнего левого угла .Я менее знаком с ними, поскольку до сих пор избегал SMIL, но это может удовлетворить ваши текущие потребности.

...