Есть тренировочный сайт
SVGmy , по анимации с SVG .
Все картинки SVG привязаны к внешнему стилю, одному. Не внешнему, но он внешний для самих SVG . Поэтому , там ограничений нет, (которые есть для внутренних стилей в SVG) работают даже переменные CSS.
Стиль такой, но он скорее к вопросу не относится. Или относится ?
.kran {
--line: 20%;
--space: 5%;
--offset: 100%;
--time: 12s ease-out;
stroke-dasharray: var(--line) var(--space);
animation: dash var(--time);
&:hover {
animation: dash var(--time) alternate infinite; } }
@keyframes dash {
from {stroke-dashoffset: var(--offset); }
to {stroke-dashoffset: 0; } }
Снизу дерево. Есть такой фреймворк
UIkit , там куча всего, и плюс тоже есть стили(?) для SVG (кран ихний). У них это дерево рисуется ровно с той же анимацией --
Ukit-SVG.
Ведь без анимации дуб рисуется верно . По координатам. Как этот
stroke-dashoffset:, который просто смещает штрихи, ломает координаты ? Так не может быть.
По идее должно быть наоборот ! Стандартная анимация не должна ничего ломать , на то она и стандартная. А не фреймворк, написанный парой человек. Вот такой убедительный довод.
Вопрос:
где баГовая ветка в этом дубе :) ? 
Средний
Простой
