Как самостоятельно рисовать линию с анимацией SMIL (а не CSS)

Question

Мне интересно, как выполнить на SVG this CSS self-drawing effect в теге SMIL <animate>. Вместо использования анимации css я бы использовал что-то похожее на это:

<line fill="none" stroke="#BBBBBB" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="19.69" y1="75.671" x2="19.69" y2="175.79"/> 
<animate xlink:href="#first-line" attributeName="stroke" from="transparent" to="#BBBBBB" dur="0.5s" begin="0" /> 

Однако я не могу заставить его работать. Каков правильный подход?

Answer 1

Помимо доступа к строке по идентификатору и строке, не имеющей идентификатора, в вашей анимации нет ничего плохого.

Я также увеличил продолжительность и изменил цвет, чтобы сделать его более ясным, что он оживляет.

<svg> 
 
    <line id="first-line" fill="none" stroke="#BBBBBB" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="19.69" y1="75.671" x2="19.69" y2="175.79"/> 
 
<animate xlink:href="#first-line" attributeName="stroke" from="transparent" to="red" dur="2.5s" begin="0" /> 
 
    </svg>