Анимация SVG вдоль пути с горизонтальной реакцией ⇐ CSS

[Anonymous]

У меня есть горизонтально реагирующий SVG-путь, который растягивается без сохранения пропорций, и он работает при использовании saveAspectRatio="none" в теге и векторного эффекта="non-scaling-stroke" на пути, чтобы сохранить его нетронутым. Но мне также нужно анимировать элемент по тому же пути, не теряя его соотношения сторон.
Вот пример, и, как вы можете видеть, он работает, если вы измените размер оболочки по горизонтали, но не для звезда, которая теряет соотношение сторон из-за глобального атрибута saveAspectRatio="none". Я не могу найти обходной путь для этого и сделать так, чтобы путь реагировал горизонтально, а звезда оставалась неповрежденной и следовала по пути...

Код: Выделить всё

.wrapper {
width: 100%;
min-width: 200px;
max-width: 100%;
height: 200px;
resize: horizontal;
overflow: hidden;
border: 1px solid blue;
}
svg {
width: 100%;
height: 100%;
}
.path {
fill: none;
stroke: black;
stroke-width: 2px;
stroke-dasharray: 6 6;
stroke-linecap:round;
}
.star {
fill: red;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/790 ... responsive