SVG SMIL: animateTransform заменить, чтобы установить (непрозрачность и атрибуты масштаба)
Могу ли я установить анимацию для преобразования Raplace?
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur="0.2s" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur="0.2s" fill="freeze"></animateTransform>
Для манипуляции с transform(scale), как я это сделал с моим атрибутом 'stroke-opacity ' здесь:
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"></set>
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"></set>
</rect>
Я пытаюсь получить что-то подобное
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<set attributeName="transform" type="scale" begin="mousedown" end="mouseout" to="1.15"></set>
<set attributeName="transform" type="scale" begin="mouseup" end="mouseover" to="1"></set>
</rect>
но эта структура не работает.
Оно работает:
Пример наведения (с помощью набора): http://jsfiddle.net/exn2qr0s/
Пример клика (с использованием animateTransform): http://jsfiddle.net/exn2qr0s/1/
Не работает
Пример клика (с использованием набора): http://jsfiddle.net/exn2qr0s/2/
Мне нужно использовать set tag вместо animateTransform для создания эффекта масштабирования, когда 'mousedown', потому что animateTransform теперь работает плохо после последних обновлений Fire Fox ( Устаревшая анимация SMIL SVG заменена эффектами CSS или веб-анимации (наведите курсор, нажмите))
1 ответ
Согласно таблице в спецификации SVG animateTransform работает только с преобразованиями и всеми другими элементами анимации, включая <set>
не работают над преобразованиями.