SVG eseménykezelés

• Szerző: Sallai András
• Copyright © 2011, Sallai András
• Szerkesztve: 2011, 2015
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

<svg xmlns= "http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200">
 
<script type="text/ecmascript">
<![CDATA[
 
function duplaz(evt)
{
 
   var r=evt.target.getAttribute("r");
   evt.target.setAttribute("r", 2*r);
}
 
function visszaallit(evt)
{
   evt.target.setAttribute("r",50);
}
 
//]]>
</script>
 
<circle cx="100" cy="100" r="50" fill="red"
        onclick="duplaz(evt)" onmouseout="visszaallit(evt)"/>
 
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <rect x="0" y="0" width="100" height="50" fill="red"
        onclick="evt.target.setAttribute('fill', 'blue')"/>
</svg>

<svg xmlns= "http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200">
 
<script type="text/ecmascript">
<![CDATA[
 
function sugarMutat(evt) 
{
   var sugar = parseFloat(evt.target.getAttributeNS(null,"r"));
 
   alert("A kör sugara: " + sugar);
      }
 
//]]>
</script>
 
<circle cx="100" cy="100" r="50" fill="blue"
        onclick="sugarMutat(evt)" "/>
 
</svg>

<svg xmlns= "http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200">
 
<script type="text/ecmascript">
<![CDATA[
 
function nagyobbSugar(evt) 
{
 
  var elem = evt.target;
  var sugar = elem.getAttribute("r");
  elem.setAttribute("r", sugar * 2);
 
}
 
//]]>
</script>
 
<circle cx="100" cy="100" r="30" fill="blue"
        onclick="nagyobbSugar(evt)" />
 
</svg>

<svg xmlns= "http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200">
 
<script type="text/ecmascript">
<![CDATA[
 
function nagyobbSugar(evt) 
{
 
  var elem = evt.target;
  var sugar = elem.getAttribute("r");
  elem.setAttribute("r", sugar * 2);
  alert("Működik: " + elem.getClientX());
}
 
//]]>
</script>
 
<circle cx="100" cy="100" r="30" fill="blue"
        onclick="nagyobbSugar(evt)" />
 
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="200" >
<rect x="10" y="10" width="140" height="140" rx="5" ry="5" style="fill:lightgrey">
   <set attributeName="fill" from="lightgrey" to="red" begin="mouseover" end="mouseout"/>
</rect>
<text x="200" y="75" font-size="30">Mozgasd felettem és klikkelj
   <set attributeName="font-size" from="30" to="45" begin="mouseover" end="mouseout"/>
   <set attributeName="fill" from="black" to="red" begin="mousedown" end="mouseup"/>
</text>
</svg>

<svg  xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="200" >
 
 <rect id="changeToRed" x="20" y="20" width="25" height="25" rx="5" 
          ry="5" style="fill:lightgrey"/>
 
    <text x="50" y="35" font-size="14">Mozgasd felette, hogy a szöveg piros legyen</text>
 
    <rect id="bigText" x="20" y="60" width="25" height="25" rx="5" 
          ry="5" style="fill:lightgrey"/>
    <text x="50" y="75" font-size="14">Mozgasd felette, hogy a szöveg piros legyen</text>
 
    <rect id="bigRedText" x="20" y="100" width="25" height="25" rx="5" 
          ry="5" style="fill:lightgrey"/>
    <text x="50" y="115" font-size="14">Klikkelj, hogy a szöveg nagy és piros legyen</text>
 
    <text id="changingText" x="350" y="100" font-size="30" 
                               fill="black">Változtass meg
        <set attributeName="fill" from="black" to="red" 
              begin="changeToRed.mouseover" end="changeToRed.mouseout"/>
        <set attributeName="font-size" from="14" to="50" 
              begin="bigText.mouseover" end="bigText.mouseout"/>
        <set attributeName="font-size" from="14" to="50" 
              begin="bigRedText.click" end="bigRedText.mouseout"/>
        <set attributeName="fill" from="black" to="red" 
              begin="bigRedText.click" end="bigRedText.mouseout"/>
    </text>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="480" >
    <rect x="20" y="20" width="250" height="250" rx="5" ry="5" 
          style="fill:red">
        <animate attributeName="opacity" from="1" to="0" 
              begin="click + 1s" dur="1s" fill="restore" />
    </rect>
    <circle cx="250" cy="250" r="100" style="fill:blue">
        <animate attributeName="fill" from="blue" to="green" 
              begin="mouseover" dur="2s" fill="restore" />
    </circle>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 450 250" onload="init()" xml:space="preserve">
    <title>Billentyűesemények</title>
    <script type="text/ecmascript">
        <![CDATA[
            var evtText1;
            var evtText2;
            var evtText3;
            var typeInitialized = false;
            var text = "";
            function init() {
                //hivatkozás a dinamikus szövegelemekre
                evtText1 = document.getElementById("evtText1");
                evtText2 = document.getElementById("evtText2");
                evtText3 = document.getElementById("evtText3");
            }
            //billentyű események kezelése
            function typeText(evt) {
               //Minden valódi karakter kezelése "keypress"
               if (evt.type == "keypress") {
                   //néhány böngésző támogatja: evt.charCode,
                   //némelyik csak ezt: evt.keyCode
                   if (evt.charCode) {
                        var charCode = evt.charCode;
                   }
                   else {
                        var charCode = evt.keyCode;
                   }
                   //minden valódi karakter
                   if (charCode > 31 && charCode != 127 && charCode < 65535) {
                        text += String.fromCharCode(charCode);
                   }
                    //backspace billentyű
		           if (charCode == 8) {
                        //szöveg rövidítése
                        text = text.substring(0,text.length-1);
                   }
                   //enter billentyű
                   else if (charCode == 10 || charCode == 13) {
                         stopTyping(evt);
                   }
               }
               //dinamikus szöveg frissítése
               evtText1.firstChild.nodeValue = text;
               //nem kívánatos billentyűk például
               //az Opera vagy Mozilla böngészőben
               evt.preventDefault();
            }
            //ez a függvény az eseményfigyelőt hozzáadja
            function initTyping(evt) {
                if (!typeInitialized) {
                    document.documentElement.addEventListener("keypress",typeText,false);
                    document.documentElement.addEventListener("click",stopTyping,false);
                    evtText2.firstChild.nodeValue = "Typing Active";
                    typeInitialized = true;
                }
                //nem szeretnénk a dokumentum szintjén a klikk eseményeket
                evt.stopPropagation();
            }
            function stopTyping(evt) {
                    document.documentElement.removeEventListener("keypress",typeText,false);
                    document.documentElement.removeEventListener("click",stopTyping,false);
                    typeInitialized = false;
                    evtText2.firstChild.nodeValue = "Typing Inactive";
                    evtText3.firstChild.nodeValue = "You typed: "+text;
            }
        ]]>
    </script>
    <rect id="bgRect" x="-500" y="-500" 
    width="1500" height="1500" fill="yellow" stroke="none" />
    <rect x="10" y="50" width="150" height="20" fill="white" stroke="black"
    onclick="initTyping(evt)" />
    <g font-size="10px" font-family="Arial">
        <text x="10" y="30" font-size="12px" font-weight="bold">
        Eseménykezelő hozzáadása és törlése
        </text>
        <text x="10" y="130">
        Kattints a fehér részre a gépelés megkezdéséhez.
        <tspan x="10" dy="15">
        Kattints a szövegdobozon kívül vagy nyomd meg az enter billentyűt az írás befejezéséhez.
        </tspan>
        <tspan x="10" dy="15">
        Nyomd meg a Backspace billentyűt az utolsó karakter törléséhez.
        </tspan></text>
 
        <text x="15" y="65" id="evtText1" pointer-events="none"> </text>
        <text x="15" y="90" id="evtText2">Nincs gépelés</text>
        <text x="15" y="105" id="evtText3">Ezt írtad: </text>
    </g>
</svg>

Működés közben

• http://hu.wikipedia.org/wiki/ECMAScript
• http://www.w3.org/TR/SVG/script.html
• http://www.w3.org/TR/2000/WD-SVG-20000629/ecmascript-binding.html
• http://xmlgraphics.apache.org/batik/using/scripting/ecmascript.html
• http://www.ibm.com/developerworks/library/x-svgint/
• http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/
• http://pilat.free.fr/english/routines/js_dom.htm