Firefox 的 SVG + GSAP 蒙版动画问题

Question

我想为 SVG 中的文本蒙版制作动画（为了过度简化，假设为 Scale+）（它必须是蒙版）。 我正在使用 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 下，文本的缩放位置是错误的/超出范围并破坏了动画。一直在寻找变换原点和不同的初始文本位置，但没有运气。

Answer 1

有几个问题：

1. Firefox 有几个错误。它不允许对不在可见 DOM 中的元素使用 getBBox()，也不允许对 中的元素使用 getBBox()。 GSAP 已经通过感知这种情况并将元素临时移动到根中的元素来解决第一个问题，但是您的特定场景取决于掩码的大小，并且您使用的是相对位置，例如 x="50%"，所以它会把东西扔掉。我认为我们没有任何合理的方法可以更改 GSAP 以解决 Firefox 中的特定错误。
2. 另一个 Firefox 错误：除非被遮罩的元素本身发生某种变化，否则它不会对遮罩进行更改。
3. 您有“new gsap.timeline()”，但这不是构造函数。不要使用“新”关键字。

这是一个使用 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.

这有帮助吗？