在另一个动画结束时启动 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 有一个错误并且不支持转义，所以如果你想让它在那里工作，你必须删除 - 标志。

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

Starting svg animation on the end of another animation doesn't trigger

svg

svg-animate