Задача – добавить звук к существующей анимации, то есть к кнопкам запуска и остановки гоночных машинок привязать включение и отключения звука гоночных моторов.
В шапке SVG файла необходимо добавить строку, если ее нет:
xmlns:html=”//www.w3.org/1999/xhtml”
Далее подбираем подходящий файл со звуками гоночных моторов и присоединяем его в секции <defs> с помощью парных тегов <html:audio>..</html:audio>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg version = "1.1" baseProfile="full" xmlns = "//www.w3.org/2000/svg" xmlns:xlink = "//www.w3.org/1999/xlink" xmlns:ev = "//www.w3.org/2001/xml-events" xmlns:html="//www.w3.org/1999/xhtml" width="580" height="400" viewBox="0 0 800 540" > <defs> ... <script> function $(melissimo) { return document.querySelector(melissimo); } </script> <html:audio autoplay="true"> <html:source src="cal_alert_tones.mp3" type="audio/mpeg"/> </html:audio> </defs> |
К кнопке “Start” – запуска анимации движения гоночных машинок по трассе, добавляем код начала воспроизведения звука: id=”startButton” onmouseover=”$(‘audio’).play(); $(‘audio’).loop=true;”
К кнопке “Stop” – добавляем код постановки звука на паузу при наведении курсора мышки: id=”stopButton” onmouseover=”$(‘audio’).pause(); try { $(‘audio’).currentTime=0; } catch(e) {} $(‘audio’).loop=false;”
1 2 3 4 5 6 7 8 9 10 |
<g id="startButton" onmouseover="$('audio').play(); $('audio').loop=true;"> <rect x="700" y="470" rx="3" ry="3" width="60" height="20" fill="green" /> <text x="730" y="485" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle" fill="white" >Start</text> </g> <g id="stopButton" onmouseover="$('audio').pause(); try { $('audio').currentTime=0; } catch(e) {} $('audio').loop=false;"> <rect x="600" y="470" rx="3" ry="3" width="60" height="20" fill="crimson" /> <text x="630" y="485" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle" fill="white" >Stop</text> </g> |
⇚ Анимация SVG path – гонки автомобилей
⇛ Горизонтальный параллакс с помощью viewBox