szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[:oktatas:grafika:svg|< SVG]]


====== SVG eseménykezelés ======

  * **Szerző:** Sallai András
  * Copyright (c) 2011, Sallai András
  * Szerkesztve: 2011, 2015, 2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Clickre dupla =====

<code xml>
<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>

</code>


<html>
<iframe src="m/svg/esemeny/clickre_dupla/index.html" width="300" height="300">
</iframe>
</html>

===== Clickre más szín =====

<code xml>
<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>
</code>

<html>

<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>
</html>

===== Alert =====

<code xml>

<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>

</code>



<html>

<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>
      
</html>



===== Célobjektum =====

<code xml>
<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>
</code>


<html>

<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");
}

//]]>
</script>

<circle cx="100" cy="100" r="30" fill="blue"
        onclick="nagyobbSugar(evt)" />

</svg>
      
</html>


===== Meg =====

<code xml>
<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>

</code>


<html>

<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>
      
</html>



===== Esemény másként =====

<code xml>
<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>
</code>


<html>

<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>

</html>


===== Más elem megváltoztatása =====


<code xml>
<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>

</code>

<html>
<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>
</html>


===== Animáció indítása =====

<code xml>
<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>
</code>

<html>
<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>
</html>


===== Billentyű =====


<code xml>
<?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>

</code>

Működés közben

<html>



<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="300" viewBox="0 0 450 250" onload="init()" xml:space="preserve">
    <title>Eseményfigyelő hozzáadása, elvétele</title>
    <script type="text/ecmascript">
        <![CDATA[
            var evtText1;
            var evtText2;
            var evtText3;
            var typeInitialized = false;
            var text = "";
            function init() {
                //getting references to dynamic text elements
                evtText1 = document.getElementById("evtText1");
                evtText2 = document.getElementById("evtText2");
                evtText3 = document.getElementById("evtText3");
            }
            //this function handles the keyboard events
            function typeText(evt) {
               //handle "keypress" for all "real characters"
               if (evt.type == "keypress") {
                   //some browsers support evt.charCode, some only evt.keyCode
                   if (evt.charCode) {
                        var charCode = evt.charCode;
                   }
                   else {
                        var charCode = evt.keyCode;
                   }
                   //all real characters
                   if (charCode > 31 && charCode != 127 && charCode < 65535) {
                        text += String.fromCharCode(charCode);
                   }
                    //backspace key
		           if (charCode == 8) {
                        //shorten text
                        text = text.substring(0,text.length-1);
                   }
                   //enter key
                   else if (charCode == 10 || charCode == 13) {
                         stopTyping(evt);
                   }
               }
               //update dynamic text
               evtText1.firstChild.nodeValue = text; 
               //suppress unwanted browser shortcuts. e.g. in Opera or Mozilla
               evt.preventDefault();
            }
            //this function adds the event listeners
            function initTyping(evt) {
                if (!typeInitialized) {
                    document.documentElement.addEventListener("keypress",typeText,false);
                    document.documentElement.addEventListener("click",stopTyping,false);
                    evtText2.firstChild.nodeValue = "Gépelés aktív";
                    typeInitialized = true;
                }
                //we don't want the click event on the document level to
                //immediately stop the typing mode
                evt.stopPropagation();
            }
            function stopTyping(evt) {
                    document.documentElement.removeEventListener("keypress",typeText,false);
                    document.documentElement.removeEventListener("click",stopTyping,false);
                    typeInitialized = false;
                    evtText2.firstChild.nodeValue = "Nincs gépelés";
                    evtText3.firstChild.nodeValue = "Ezt írtad: "+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ény hozzáadása és elvételének bemutatása.
        </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 gépelted: </text>
    </g>
</svg>		
		

</html>



===== Linkek =====
  * 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