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

有一些问题：

Firefox有几个错误。它不允许在不在可见DOM中的元素上使用getBBox（），也不允许在中的元素上使用它。 GSAP已通过感知此情况并将元素临时移至根目录中的元素来解决第一个问题，但是您的具体情况取决于蒙版的大小，并且您使用的相对位置为x =“ 50％”，这样会丢掉东西。我没有找到任何合理的方法来更改GSAP来解决Firefox中的-bug。
另一个Firefox错误：除非被遮罩的元素本身进行了某种更改，否则它不会绘制对遮罩的更改。
您有“ 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.

有帮助吗？

Firefox的SVG + GSAP蒙版动画问题

1 个答案: