#animation #svg #gradient
#Анимация #svg #градиент
Вопрос:
У меня есть SVG, и я хотел бы анимировать остановку градиента слева направо и обратно. Мне удалось анимировать слева направо, но я не знаю, как анимировать его обратно.
Вот мой код:
<svg id="mySvg" width="700px" height="498px">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.4998" y1="250" x2="700" y2="250">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1">
<animate attributeName="offset" begin="0s" dur="2s" from="0" to="1" repeatCount="indefinite" />
</stop>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.1"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M691.115,114.684c-9.084,0-16.193,7.1 ..."/>
</svg>
Что мне нужно сделать, чтобы создать анимацию, которая постоянно перемещает остановку градиента слева направо и обратно?
Большое спасибо,
Винсент
Комментарии:
1. Я обнаружил, что это работает только в Firefox. Вы должны переключить вкладки или щелкнуть объект, чтобы обновить цвет. Не уверен, почему….
Ответ №1:
Вместо использования атрибутов from и to попробуйте использовать values=’0;1;0′. Атрибут values позволяет указать столько значений, сколько вы хотите использовать с течением времени, а не только два на концах.
Иногда это может быть трудно переварить, но соответствующая глава в спецификации охватывает много вопросов, которые полезно знать для анимации:http://www.w3.org/TR/SVG/animate.html
Комментарии:
1. единственное место в Интернете, где я видел этот ответ, спасибо!