Остановка/запуск SVG-вращения с помощью Javascript

Мне нужна помощь. В следующем коде я хочу управлять поворотом звезды через onmouse-event.Остановка/запуск SVG-вращения с помощью Javascript

Если вы переместите мышь над звездой, она должна вращаться.

Я думал об изменении transform в attributeName на что-то другое, когда мышь не находится над звездой через roationon()/off() функций так, что вращение не работает, но я понятия не имею, как это сделать.

Я ценю каждую помощь, которую я могу получить.

Благодаря

<!DOCTYPE html> 
<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<html> 

<body> 

<script> 
function rotationon() {} 
function rotationoff() {} 
</script> 

<svg height="2000" width="2000"> 
<polygon id="stern1" points="100,10 40,180 190,60 10,60 160,180" fill="yellow" transform="translate(100, 100)" onmouseover="rotationon()" onmouseout="rotationoff()" > 
<animateTransform 
     attributeName="transform" 
     begin="0s" 
     dur="5s" 
     type="rotate" 
     from="0 100 100" 
     to="360 100 100" 
     repeatCount="indefinite" 
    /> 
    </polygon> 
</svg> 


</body> 
</html>

источник

2013-12-13 user3099426

Просто из интереса, если это все, что вы хотите сделать, вы можете сделать это без javascript вообще, например http://jsfiddle.net/xaM6q/, но я подозреваю, что вы хотите, чтобы лучшее решение для другие биты. – Ian

Там в несколько различных способов приблизиться к этому, в зависимости от того, что его собираются интегрироваться, и насколько хорошо она будет играть с другими браузерами.

Моим инстинктом кисти было бы сказать, в конечном счете, стоит использовать одну из SVG-библиотек там, например, Raphael, snap.svg, Pablo.js и т. Д. Они помогут с некоторыми из проблем, которые могут возникнуть.

Вы также можете просто использовать чистый SVG, как я упоминал http://jsfiddle.net/xaM6q/

Однако использовать метод, который вы пытаетесь, вы можете использовать что-то вроде beginElement() и EndElement, так что код может выглядеть примерно так следующее ... скрипку в http://jsfiddle.net/xaM6q/2/

<script> 
    function rotationon(evt){ 
     document.getElementById('myanim').beginElement();  
    } 
    function rotationoff(){ 
     document.getElementById('myanim').endElement(); 
    } 
</script> 

<svg height="2000" width="2000"> 
    <g transform="translate(100,100)"> 
    <polygon id="stern1" points="100,10 40,180 190,60 10,60 160,180" fill="yellow" onmouseover="rotationon()" onmouseout="rotationoff()" > 
     <animateTransform 
     id="myanim" 
     attributeName="transform" 
     begin="indefinite" 
     dur="5s" 
     type="rotate" 
     from="0 100 100" 
     to="360 100 100" 
     fill="freeze" 
     repeatCount="indefinite" 
    /> 
    </polygon> 
    </g>

пару вещей стоит отметить. Я добавил элемент g, чтобы помочь сохранить трансформацию на месте, поскольку вы, вероятно, этого хотите (без нее вы можете обнаружить, что она уходит). Также анимация может быть немного неустойчивой в зависимости от того, как вы хотите ее остановить (я добавил «fill = freeze»), и что происходит с событиями средней анимации.

Его ценность знать все это, чтобы познакомиться с анимацией SVG, но, как уже упоминалось, я, вероятно, по-прежнему смотрю на использование сторонней библиотеки и управляю вращением вручную, вместо использования тега animate, чтобы вы могли остановить/легко перезапустите поворот под любым углом.

источник

2013-12-13 17:27:34 Ian

Остановка/запуск SVG-вращения с помощью Javascript

ответ

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