svg - 在另一个动画结束时启动 svg 动画不会触发

Question

我有两个 svg 动画，我想在 #anim-vert-gradient 末尾启动 #anim-join-gradient 动画，但是 # anim-join-gradient 动画未启动。

#anim-join-gradient 元素具有属性 begin="anim-vert-gradient.end"

.box1{width:25px}

<div class="box box1">
  <svg viewbox="0 0 100 100">
    <path id="button" class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" />
  </svg>
</div>

<svg id="play-vert-line" width="110" height="110">
								<defs>
								<linearGradient id="vert-gradient" gradientUnits="userSpaceOnUse" y1="0%" y2="100%" x1="0" x2="0">
									<stop stop-color="#1689fb"></stop>
									<stop stop-color="#7e7e7e"></stop>
									<animate xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#vert-gradient" id="anim-vert-gradient" attributeName="y1" dur="800ms" to="99%" begin="button.click" fill="freeze"></animate>
								</linearGradient>
								</defs>
								<line id="vert-line-1" x1="55.3" y1="0" x2="55.3" y2="105" stroke="url(#vert-gradient)" stroke-width="2"></line>
							</svg>
<svg id="line-join" width="110" height="110">
								<defs>
								<linearGradient id="vert-join-gradient" gradientUnits="userSpaceOnUse" y1="0%" y2="100%" x1="0" x2="0">
									<stop stop-color="#1689fb"></stop>
									<stop stop-color="#7e7e7e"></stop>
									<animate xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#vert-join-gradient" id="anim-join-gradient" attributeName="y1" dur="400ms" from="0%" to="99%" begin="anim-vert-gradient.end" fill="freeze"></animate>
								</linearGradient>
								</defs>
							  <line id="vert-line-2" x1="105" y1="0" x2="105" y2="105" stroke="url(#vert-join-gradient)" stroke-width="2"></line>
							</svg>

Answer 1

减号在 begin 属性中被特殊对待。未转义的减号被视为减法运算符。根据规范，如果您不希望这样，则需要转义它们，例如

begin="anim\-vert\-gradient.end"

这适用于 Firefox。 Chrome 有一个错误，不支持转义，所以如果你想让它在那里工作，你必须删除 - 符号。