CSS + SVG animation

[VitaliyAT]

1) Как реализовать, чтобы при наведении мышки начиналась анимация svg, без дубиката картинки (когда одна половина статическая, а другая движется, а css только сдвигает картинку). Хотелось бы напрямую.

2) Как реализовать, чтоб анимация была подвязана к положению курсора мыши (слева подвожу - одна анимация, справа подвожу - другая анимация)

На сколько я понял в svg есть привязка анимации к css - не разобрался пока. Прошу помощи у тех кто разобрался.

[VitaliyAT]

<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<style>
    :hover {
        animation-name: anim1;
    }
</style>

<rect x="400" y="100" width="200" height="200" fill="red">
    <animate id="anim1" attributeName="opacity" attributeType="CSS" from="0" to="1" dur="1s" begin="mouseover; anim2.end" />
    <animate id="anim2" attributeName="opacity" attributeType="CSS" from="1" to="0" dur="1s" begin="anim1.end" end="mouseout"/>
</rect>
<rect x="400" y="300" width="200" height="200" fill="green">
    <animate id="anim3" attributeName="opacity" attributeType="CSS" values="0;1;0" dur="1.5s" begin="mouseover" end="mouseout" fill="freeze" repeatCount="indefinite"/>
</rect>

</svg>

вот сам понял как. Красный квадрат мигает постоянно после наведения, зелёный только когда мышка над ним. Если убрать freez, то будет возвращаться в исходную.

Ссылки по теме: 1, 2 (тут какраз показывается как это делается через стили css) и 3

Edited May 12, 2012 by VitaliyAT