|
<< Click to Display Table of Contents >> Navigation: Создание окон для клиента визуализации > Рекомендации по созданию окон > Динамизация SVG элементов > Структура SVG файла > Пример SVG |
Ниже приведён пример SVG файла, демонстрирующий анимацию вращения элемента через CSS и динамическое управление состоянием анимации (Вкл/Выкл) через классы:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<style><![CDATA[
#rotate_icon {
transform-origin: center;
}
#rotate_icon.Off {
animation: none;
}
#rotate_icon.On {
animation: rotate360 2s linear infinite;
}
@keyframes rotate360 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
]]>
</style>
<path id="rotate_icon" class="Off" d="M9.26368 22L8.86567 18.8C8.65008 18.7167 8.44693 18.6167 8.25622 18.5C8.06551 18.3833 7.87894 18.2583 7.69652 18.125L4.73632 19.375L2 14.625L4.56219 12.675C4.54561 12.5583 4.53731 12.4458 4.53731 12.3375V11.6625C4.53731 11.5542 4.54561 11.4417 4.56219 11.325L2 9.375L4.73632 4.625L7.69652 5.875C7.87894 5.74167 8.06965 5.61667 8.26866 5.5C8.46766 5.38333 8.66667 5.28333 8.86567 5.2L9.26368 2H14.7363L15.1343 5.2C15.3499 5.28333 15.5531 5.38333 15.7438 5.5C15.9345 5.61667 16.1211 5.74167 16.3035 5.875L19.2637 4.625L22 9.375L19.4378 11.325C19.4544 11.4417 19.4627 11.5542 19.4627 11.6625V12.3375C19.4627 12.4458 19.4461 12.5583 19.4129 12.675L21.9751 14.625L19.2388 19.375L16.3035 18.125C16.1211 18.2583 15.9303 18.3833 15.7313 18.5C15.5323 18.6167 15.3333 18.7167 15.1343 18.8L14.7363 22H9.26368ZM11.005 20H12.9701L13.3184 17.35C13.8325 17.2167 14.3093 17.0208 14.7488 16.7625C15.1882 16.5042 15.5904 16.1917 15.9552 15.825L18.4179 16.85L19.3881 15.15L17.2488 13.525C17.3317 13.2917 17.3897 13.0458 17.4229 12.7875C17.4561 12.5292 17.4726 12.2667 17.4726 12C17.4726 11.7333 17.4561 11.4708 17.4229 11.2125C17.3897 10.9542 17.3317 10.7083 17.2488 10.475L19.3881 8.85L18.4179 7.15L15.9552 8.2C15.5904 7.81667 15.1882 7.49583 14.7488 7.2375C14.3093 6.97917 13.8325 6.78333 13.3184 6.65L12.995 4H11.0299L10.6816 6.65C10.1675 6.78333 9.69071 6.97917 9.25124 7.2375C8.81177 7.49583 8.40962 7.80833 8.04478 8.175L5.58209 7.15L4.61194 8.85L6.75124 10.45C6.66833 10.7 6.61028 10.95 6.57711 11.2C6.54395 11.45 6.52736 11.7167 6.52736 12C6.52736 12.2667 6.54395 12.525 6.57711 12.775C6.61028 13.025 6.66833 13.275 6.75124 13.525L4.61194 15.15L5.58209 16.85L8.04478 15.8C8.40962 16.1833 8.81177 16.5042 9.25124 16.7625C9.69071 17.0208 10.1675 17.2167 10.6816 17.35L11.005 20ZM12.0498 15.5C13.0116 15.5 13.8325 15.1583 14.5124 14.475C15.1924 13.7917 15.5323 12.9667 15.5323 12C15.5323 11.0333 15.1924 10.2083 14.5124 9.525C13.8325 8.84167 13.0116 8.5 12.0498 8.5C11.0713 8.5 10.2463 8.84167 9.57463 9.525C8.90299 10.2083 8.56716 11.0333 8.56716 12C8.56716 12.9667 8.90299 13.7917 9.57463 14.475C10.2463 15.1583 11.0713 15.5 12.0498 15.5Z" fill="black"/>
</svg>