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> не работают над преобразованиями.

Другие вопросы по тегам