Question

我有两个svg动画，我想在#anim-join-gradient的末尾开始#anim-vert-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="anim\-vert\-gradient.end"

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

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

1 个答案: