#animation #svg #element
#Анимация #svg #элемент
Вопрос:
помогите мне разобраться. «Отбросить» не работает. круг должен исчезнуть через 2 секунды
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>discard</title>
</head>
<body>
<svg width="800" height="600">
<circle id="circle2" cx="400" cy="300" r="100" fill="none"
stroke="green" stroke-width="70" stroke-dasharray="15 15">
<animateTransform attributeName="transform" type="rotate"
begin="1s" dur="10s" from="0 400 300" to="-720 400 300"/>
<discard begin="2s"/>
</circle>
</svg>
</body>
</html> Комментарии:
1. Насколько мне известно, ни один текущий браузер не реализует отбрасывание.
2. Полгода назад это работало в Google Chrome, и я был удивлен, что код не изменился, но перестал работать. Завершение поддержки?
3. SVGamp;can=1″ rel=»nofollow noreferrer»> bugs.chromium.org/p/chromium/issues/…
Ответ №1:
Вы можете скрыть круг с помощью <set begin="2s" attributeName="visibility" to="hidden"/> вместо <discard begin="2s"/> . На самом деле он не отбрасывает круг, но имеет более широкую совместимость.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>discard</title>
</head>
<body>
<svg width="800" height="600">
<circle id="circle2" cx="400" cy="300" r="100" fill="none"
stroke="green" stroke-width="70" stroke-dasharray="15 15">
<animateTransform attributeName="transform" type="rotate"
begin="1s" dur="10s" from="0 400 300" to="-720 400 300"/>
<set begin="2s" attributeName="visibility" to="hidden"/>
</circle>
</svg>
</body>
</html>