Задать вопрос
@lagudal
svg

Простой svg морфинг без js + кроссбраузерность — возможно ли?

приветствую,
в хроме отлично работает вот такая схема. (код небольшой, поэтому помещаю целиком)
<style>
	svg {
	width:100%;
	height:100%;
}
	#before {
	animation: morph 1s linear forwards 2s;
	}
	@keyframes morph {
	100% {d: path("M23.49,145.951c50.027-50.027,130.992-50.027,181.02,0");}
	}
</style>
<body>
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve">
<path id="before" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M23.49,108.431
	c50.027,50.027,130.992,50.027,181.02,0"/>
</svg>

</body>

Но совершенно не работает в фф, например.
Возможно ли заставить, ну либо какой другой простой способ, желательно, без js?
  • Вопрос задан
  • 552 просмотра
Комментировать
Подписаться 2 Простой Комментировать
Решения вопроса 1
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Можно использовать SMIL в ff будет работать, но не будет в ie и edge. Хотя в edge обещают сделать поддержку в ближайшее время, а так как он обновляется без спроса, то наверное SMIL анимация для svg является приоритетной.

https://codepen.io/wokster/pen/zPXYeP

https://caniuse.com/#search=smil

И вот офтоп, но просто напомнило:
https://codepen.io/Milky-box/pen/QvLxpd
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Руководитель отдела тестирования/QA Lead
Uniscan Research • Новосибирск
от 175 000 до 210 000 ₽
Senior .NET Core developer
Spatium Software • Каир
от 250 000 до 300 000 ₽
Kotlin Backend-разработчик
vivaCRM • Москва
от 200 000 до 250 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Найти ошибку flutter_map
26 апр. 2024, в 05:31
1000 руб./за проект
Разработать электронику для весов с Wi-Fi
26 апр. 2024, в 01:22
1000 руб./в час
Очень срочно нужно помочь запустить программу с UI
26 апр. 2024, в 00:13
1000 руб./за проект
Ещё заказы