HTML:Рецепты/Пульсирующий круг: различия между версиями
Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
Myagkij (обсуждение | вклад) Нет описания правки |
Myagkij (обсуждение | вклад) Нет описания правки |
||
| (не показаны 3 промежуточные версии этого же участника) | |||
| Строка 1: | Строка 1: | ||
{{HTML панель перехода}} | {{HTML панель перехода}} | ||
{{Myagkij-редактор}} | |||
== | =Пульсирующий круг= | ||
==Проблема== | |||
Хотите разместить на странице пульсирующий круг. | |||
==Решение== | |||
===Код=== | |||
<syntaxhighlight lang="html5" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS"> | <syntaxhighlight lang="html5" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS"> | ||
| Строка 10: | Строка 19: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
===Результат=== | |||
<html> | |||
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"> | <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"> | ||
<circle id="c" r="10" cx="200" cy="200" fill="red"/> | <circle id="c" r="10" cx="200" cy="200" fill="red"/> | ||
<animate xlink:href="#c" attributeName="r" from="10" to="200" dur="5s" repeatCount="indefinite"/> | <animate xlink:href="#c" attributeName="r" from="10" to="200" dur="5s" repeatCount="indefinite"/> | ||
</svg> | </svg> | ||
</html> | |||
=См.также= | =См.также= | ||
Текущая версия от 23:46, 1 ноября 2023
Проверка/Оформление/Редактирование: Мякишев Е.А.
Пульсирующий круг
Проблема
Хотите разместить на странице пульсирующий круг.
Решение
Код
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<circle id="c" r="10" cx="200" cy="200" fill="red"/>
<animate xlink:href="#c" attributeName="r" from="10" to="200" dur="5s" repeatCount="indefinite"/>
</svg>
Результат
См.также
Внешние ссылки
