SVG анимировать от круга к строке

Я хочу сформировать круг к линии (пути).
Возможно ли это?SVG анимировать от круга к строке

Возможно, это может быть проблема с Google.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.28 95.28"> 
 
    <title>circle</title> 
 
    <circle cx="47.64" cy="47.64" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/> 
 
</svg>

Лучший способ (для меня) было бы, если верх и низ приходят вместе.
Но меня больше интересует, как это сделать! Я не мог найти что-нибудь о том, как формировать элемент SVG

--------- МАЛЕНЬКИЙ UPDATE ----------
Просто нашли this. Это может помочь мне получить направление.

--------- SMALL UPDATE ----------
Итак, я попытался сделать это без JQuery, но я думаю, что это не сработает. Причина для thsi в том, что мой JQuery сосет .... Может кто-нибудь помочь мне с некоторыми исправлениями JQuery?

источник

2017-02-02 Interactive

Вы можете использовать animateTransform методы вертикального масштаба, чтобы превратить круг в линию и для перевода-Y провести преобразование координат в центре круга

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.28 95.28"> 
 
    <title>circle</title> 
 
    <g> 
 
    <circle cx="47.64" cy="47.64" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"> 
 
    <animateTransform attributeName="transform" 
 
    type="scale" 
 
    from="1 1" 
 
    to="1 0" 
 
    begin="0s" 
 
    dur="2s" 
 
    repeatCount="indefinite" 
 
    /> 
 
    </circle> 
 
<animateTransform attributeName="transform" 
 
    type="translate" 
 
    from="0 0" 
 
    to="0 24" 
 
    begin="0s" 
 
    dur="2s" 
 
    repeatCount="indefinite" 
 
    /> 
 
    </g> 
 
</svg>

источник

2017-02-02 09:57:10 Banzay

Ого это является удивительным. Я прочитаю «». Не знал об этом. Тинкс мат. – Interactive

следует помнить, что animateTransform лишен и будет удален из браузеров. это решение не является будущим. :(( http://stackoverflow.com/questions/30965580/deprecated-smil-svg-animation-replaced-with-css-or-web-animations-effects-hover –

Thnx. отстой. – Interactive

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

Простой scale() сделал трюк.

.container{ 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 auto; 
 
} \t 
 
\t 
 
@keyframes shapeshifter { 
 
\t 0% { 
 
\t \t transform: scale(1,1); 
 
\t \t transform-origin: 50% 50%; 
 
\t } \t 
 
\t 100% { 
 
\t \t transform: scale(1,0.01); 
 
\t \t transform-origin: 50% 50%; 
 
\t } \t 
 
} 
 
.shape{ 
 
\t animation: shapeshifter 1s ease-in-out 1 both; 
 
}

<div class="container"> 
 
\t <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> 
 
    <title>circle</title> 
 
    <circle class="shape" cx="50.109" cy="50.086" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/> 
 
</svg> 
 
</div>

источник

2017-02-02 13:24:05 Interactive

SVG анимировать от круга к строке

ответ

Смежные вопросы