2015-06-24 7 views
1

Могу ли я использовать анимацию для преобразования?SVG SMIL: animateTransform заменить на набор (атрибуты непрозрачности и масштаба)

<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> 

Для манипулирования трансформных (масштаб), как я сделал это с моей "штрих-непрозрачностью атрибуте здесь:

<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/

мне нужно использовать набор тегов вместо AnimateTransform для создания масштабного до эффект, когда "MouseDown потому AnimateTransform теперь работает плохо после последних обновлений Fire Fox (Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click))

ответ

1

согласно table in the SVG specification AnimateTransform работает только на преобразованиях, а все остальные элементы анимации, включая <set>, не работают на преобразованиях.

Смежные вопросы