Ошибка анимации маски SVG + GSAP с Firefox - PullRequest
Новая
       65

Ошибка анимации маски SVG + GSAP с Firefox

1 голос
/ 08 апреля 2020

Я хочу анимировать (для упрощения, предположим, Scale +) текстовую маску в SVG (это должна быть маска). Я использую GSAP для достижения этой цели.

Моя анимация будет хорошо воспроизводиться с Edge и Chrome, но не с Firefox. 

var tl = new gsap.timeline();
			tl.add(
				gsap.to("#masktext", 3, {scale: 3, "text-anchor": "middle", transformOrigin: "50% 50%"}),
				"0"
			);
.svg-container {
	font-size: 13rem;
	font-weight:bold;
	width: 100%;
	height: 100%;
	max-height:700px;
	position: absolute;
	top: 0;
}

#mysvg {
	width: 100%;
	height: 100%;
	overflow: visible;
	display: block;
}

#masktext {
	text-anchor: middle;
	transform-origin: center center;
	}

#maskrect {
	fill: white;
}

#myrect {
	fill: white;
	-webkit-mask: url(#mask);
	mask: url(#mask);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<div class="svg-container">
		<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 700"  width="1920px" height="700px" preserveAspectRatio="xMidYMid meet">
			
			<defs>
				<mask id="mask" x="0" y="0" width="1920" height="700"  maskUnits="userSpaceOnUse"  maskContentUnits="userSpaceOnUse" preserveAspectRatio="xMidYMid slice">
					<rect id="maskrect" x="0" y="0" width="1920" height="700"/>
					<text id="masktext" x="50%" y="50%">Creative</text>

				</mask>
				
			</defs>
			<rect id="myrect" x="0" y="0" width="1920" height="700" style="fill:green;"/>
		</svg>
  	</div>

https://jsfiddle.net/yumigo/qcrawe2g/

Я думаю, что при Firefox масштабированное положение текст неправильный / выходит за рамки и разрушает анимацию. Безуспешно пытался найти источник трансформации и различные начальные позиции текста.

1 Ответ

1 голос
/ 08 апреля 2020

Есть несколько проблем:

  1. Firefox имеет несколько ошибок. Он не разрешит getBBox () для элемента, которого нет в видимом DOM, и не допустит его для элементов в . GSAP уже обходит первую проблему, чувствуя это состояние и временно перемещая элемент в элемент, который находится в root, но ваш конкретный сценарий зависит от размера маски, и вы используете относительную позицию, такую ​​как x = "50% ", так что это скинет вещи. Я не вижу разумного способа изменить GSAP, чтобы обойти ошибку -specifi c в Firefox.
  2. Еще одна ошибка Firefox: она не отображает изменения в маске, если только у самого маскируемого элемента нет каких-либо изменений.
  3. У вас был "новый gsap.timeline ()", но это не конструктор. Не используйте ключевое слово "new".

Вот исправленная версия, которая использует svgOrigin, так что она абсолютна и не зависит от относительного источника происхождения, такого как "50% 50%":

https://jsfiddle.net/rxva8gnu/1/

// use svgOrigin so that it's absolute and you don't need to rely on relative stuff like "50% 50%"
gsap.to("#masktext", {scale: 3, duration:3, textAnchor: "middle", svgOrigin: "960 260"});
gsap.to("#myrect", {x:"+=0.001", duration: 3}); // to work around another Firefox bug that won't repaint with the newly-transformed mask unless the myrect also has a changed property.

Помогает ли это?

...