Учебники

SVG — Интерактивность

Январь 15, 2019

Изображения SVG могут быть адаптированы к действиям пользователя. SVG поддерживает события указателя, события клавиатуры и события документа. Рассмотрим следующий пример.

пример

testSVG.htm

<html>
   <title>SVG Interactivity</title>
   <body>
      
      <h1>Sample Interactivity</h1>
      
      <svg width="600" height="600">
         <script type="text/JavaScript">
            <![CDATA[
               function showColor() {
                  alert("Color of the Rectangle is: "+
                  document.getElementById("rect1").getAttributeNS(null,"fill"));
               }
               
               function showArea(event){
                  var width = parseFloat(event.target.getAttributeNS(null,"width"));
                  var height = parseFloat(event.target.getAttributeNS(null,"height"));
                  alert("Area of the rectangle is: " +width +"x"+ height);
               }
               
               function showRootChildrenCount() {
                  alert("Total Children: "+document.documentElement.childNodes.length);
               }
            ]]>
         </script>
         
         <g>
            <text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>
            
            <rect id="rect1" x="100" y="100" width="200" height="200" 
            stroke="green" stroke-width="3" fill="red" 
            onClick="showArea(event)"/>
            
            <text x="30" y="400" onClick="showRootChildrenCount()">
            Click me to print child node count.</text>
         </g>
      </svg>
   
   </body>
</html>

Explaination

  • SVG поддерживает функции JavaScript / ECMAScript. Блок сценария должен находиться в блоке CDATA, учитывая поддержку символьных данных в XML.

  • Элементы SVG поддерживают события мыши, события клавиатуры. Мы использовали событие onClick для вызова функций JavaScript.

  • В функциях javascript document представляет документ SVG и может использоваться для получения элементов SVG.

  • В функциях javascript событие представляет текущее событие и может быть использовано для получения целевого элемента, для которого возникло событие.

SVG поддерживает функции JavaScript / ECMAScript. Блок сценария должен находиться в блоке CDATA, учитывая поддержку символьных данных в XML.

Элементы SVG поддерживают события мыши, события клавиатуры. Мы использовали событие onClick для вызова функций JavaScript.

В функциях javascript document представляет документ SVG и может использоваться для получения элементов SVG.

В функциях javascript событие представляет текущее событие и может быть использовано для получения целевого элемента, для которого возникло событие.

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG. Нажмите на каждый текст и прямоугольник, чтобы увидеть результат.

74
Share: