1
두 개의 svg 애니메이션이 있는데 #anim-vert-gradient의 끝에 #anim-join-gradient 애니메이션을 시작하려고하지만 #anim-join-gradient 애니메이션이 시작되지 않습니다.다른 애니메이션이 끝날 때 svg 애니메이션을 시작하지 않습니다.
#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">
\t \t \t \t \t \t \t \t <defs>
\t \t \t \t \t \t \t \t <linearGradient id="vert-gradient" gradientUnits="userSpaceOnUse" y1="0%" y2="100%" x1="0" x2="0">
\t \t \t \t \t \t \t \t \t <stop stop-color="#1689fb"></stop>
\t \t \t \t \t \t \t \t \t <stop stop-color="#7e7e7e"></stop>
\t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t </linearGradient>
\t \t \t \t \t \t \t \t </defs>
\t \t \t \t \t \t \t \t <line id="vert-line-1" x1="55.3" y1="0" x2="55.3" y2="105" stroke="url(#vert-gradient)" stroke-width="2"></line>
\t \t \t \t \t \t \t </svg>
<svg id="line-join" width="110" height="110">
\t \t \t \t \t \t \t \t <defs>
\t \t \t \t \t \t \t \t <linearGradient id="vert-join-gradient" gradientUnits="userSpaceOnUse" y1="0%" y2="100%" x1="0" x2="0">
\t \t \t \t \t \t \t \t \t <stop stop-color="#1689fb"></stop>
\t \t \t \t \t \t \t \t \t <stop stop-color="#7e7e7e"></stop>
\t \t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t </linearGradient>
\t \t \t \t \t \t \t \t </defs>
\t \t \t \t \t \t \t <line id="vert-line-2" x1="105" y1="0" x2="105" y2="105" stroke="url(#vert-join-gradient)" stroke-width="2"></line>
\t \t \t \t \t \t \t </svg>