Het DOM (Document Object Model)

In SVG heeft u net zoals in HTML een Document Object Model. Hiermee kan u via een scripttaal objecten in de pagina veranderen. U kan de kleur, plaats, grootte,... laten aanpassen door een script aan de hand van gebruikersinvoer, tijd,.... Deze gebruikersinvoer laat u registreren door events. Als u dit hoofdstuk wilt begrijpen moet u basiskennis hebben van JavaScript, Ecmascript of JScript.
  1. Wat is een event?
  2. Gebruikersinvoer.
  3. Attributen veranderen met het DOM.
  4. Objecten bijmaken met het DOM.
  5. De inhoud van een tag aanpassen met het DOM.

Wat is een event?

Een event is een attribuut dat u bij een tag plaatst. De waarde van dit attribuut is dan een script-opdracht die wordt uitgevoerd. Bijvoorbeeld:

<rect x="0" y="0" width="100" height="100" onclick="alert('U klikte op deze rechthoek');" />

Als u op deze rechthoek zou klikken (onclick) dan zou u een bericht krijgen. (Bekijk dit voorbeeld).
In SVG heeft u de volgende events:
event uitleg
onclick Als de gebruiker klikt.
onmouseover Als de gebruiker ergens over beweegt.
onmouseout De gebruiker beweegt ergens weg van.
onmousedown Als de gebruiker de muis indrukt.
onmouseup Als de gebruiker de muis los laat.
onclick Als de gebruiker klikt
onkeydown Als de gebruiker een toets indrukt (Nog nier standaard in DOM Level 2).

Gebruikersinvoer.

In SVG kan u via het object evt gebruikersinvoer zoals de plaats van de muis opvragen. Evt kan u aleen opvragen op de plaats waar de event optreed. Als u evt in een andere functie wilt gebruiken moet u evt doorgeven als een parameter. Bijvoorbeeld:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
<script type="text/ecmascript">
<![CDATA[
function klik(evt)
{
alert("U klikte op: " + evt.clientX + "," + evt.clientY);
}
]]>
</script>
<g>
<rect x="0" y="0" width="100" height="100" fill="green" onclick="klik(evt);" />
</g>
</svg>

Als u op het groene vierkant klikt krijgt u de coördinaten van de muis. (Bekijk dit voorbeeld).
Hieronder ziet u een tabel met de eigenschappen van evt:
eigenschap uitleg
screenX x-coördinaat tegenover het linker-bovenpunt van het scherm.
screenY y-coördinaat tegenover het linker-bovenpunt van het scherm.
clientX x-coördinaat tegenover het nulpunt van de SVG-afbeelding.
clientXY y-coördinaat tegenover het nulpunt van de SVG-afbeelding.
altKey Werd de alt-toets ingedrukt?
ctrlKey Werd de ctrl-toets ingedrukt?
shiftKey Werd de shift-toets ingedrukt?
metaKey Werd de meta-toets ingedrukt?
button De muisknop die werd ingedrukt.
detail Heeft de waarde 0 als de muis wordt bewogen tijdens het klikken.

Attributen veranderen met het DOM.

In SVG kan u met de functie setAttribute(attribuut,waarde van attribuut) attributen van waarde laten veranderen. Met de functie getAttribute(attribuut) vraagt u de waarde van een attribuut op. Waar u in HTML of in XHTML document.getElementById(id) gebruikt om naar een object te verwijzen, gebruikt u in SVG evt.target.ownerDocument.getElementById(id). U kan evt.target.ownerDocument opslaan in de varialble doc zodanig dat u doc overal kan gebruiken. Bijvoorbeeld:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
<script type="text/ecmascript">
<![CDATA[
var doc;
function klik(evt)
{
doc = evt.target.ownerDocument;
doc.getElementById("vierkant").setAttribute("x",100);
}
]]>
</script>
<g>
<rect id="vierkant" x="0" y="0" width="100" height="100" fill="green" onclick="klik(evt);" />
</g>
</svg>

Als u op het groene vierkant klikt krijgt wordt het vierkant honderd pixels naar rechts verplaatst. (Bekijk dit voorbeeld).

Objecten bijmaken met het DOM.

Met de functie createElementNS(specificatie,tag) maakt u een nieuw element aan. Daarna geeft u attributen van dit element met de functie setAttributeNS(specificatie,attribuut,waarde) een waarde. Als u attributen van een andere specificatie wilt toevoegen maakt u een kloon met de functie cloneNode(true) en geeft u de kloon weer met setAttributeNS(specificatie,attribuut,waarde) attributen. Daarna maakt u met de functie appendChild(gemaakt object) het object. Bijvoorbeeld:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="ronny">
<polygon style="fill: #000000;" points="10,0 31,0 33,2 33,10 8,10 8,2 10,0" />
<polygon style="fill: #f2cabf; stroke: #000000; stroke-width: 1;" points="9,10 9,12 8,13 8,18 7,19 7,21 5,23 2,23 1,24 2,26 3,29 5,30 7,31 7,39 8,43 9,46 10,48 11,50 12,52 16,56 17,57 17,58 18,59 23,59 24,58 24,57 25,56 29,52 30,50 31,48 32,46 33,43 34,39 34,31 36,30 38,29 39,26 40,24 39,23 35,22 34,19 33,13 32,10" />
<line x1="1" y1="9" x2="40" y2="9" style="stroke: black; stroke-width: 1;" />
<rect x="11" y="17" height="6" width="6" fill="#000000" />
<rect x="25" y="17" height="6" width="6" fill="#000000" />
<line x1="14" y1="43" x2="28" y2="43" style="stroke: red; stroke-width: 1;" />
<line x1="7" y1="18" x2="11" y2="20" style="stroke: black; stroke-width: 1;" />
<polygon style="stroke: #000000; stroke-width: 1; fill: none;" points="17,20 24,20 24,23 23,24 23,28 22,28 22,29 22,28 23,28 24,29 24,32 23,33 18,33 17,32 17,29 18,28 19,28 19,29 19,28 18,28 18,24 17,23 17,20" />
<line x1="5" y1="25" x2="5" y2="28" style="stroke: black; stroke-width: 1;" />
<line x1="36" y1="25" x2="36" y2="28" style="stroke: black; stroke-width: 1;" />
</g>
</defs>
<script type="text/ecmascript">
<![CDATA[
function klik(evt)
{
var maakuse = document.createElementNS("http://www.w3.org/2000/svg", "use");
maakuse.setAttributeNS(null,"x",Math.random()*160);
maakuse.setAttributeNS(null,"y",Math.random()*160);
var kloon = maakuse.cloneNode(true);
kloon.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#ronny");
document.getElementById("body").appendChild(kloon);
}
]]>
</script>
<g id="body">
<rect id="vierkant" x="0" y="0" width="100" height="20" fill="green" onclick="klik(evt);" />
</g>
</svg>

Als u op het groene vierkant klikt komen er gezichten bij op een toevalige plaats. (Bekijk dit voorbeeld).

De inhoud van een tag aanpassen met het DOM.

Met de functie setData(data) verandert u de inhoud van een tag. Bijvoorbeeld:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
<script type="text/ecmascript">
<![CDATA[
var teller = 0;
function klik(evt)
{
teller++;
evt.target.ownerDocument.getElementById("tekst").getFirstChild().setData("U klikte " + teller + " keer");
}
]]>
</script>
<text id="tekst" onclick="klik(evt)" x="10" y="20" font-size="20" font-family="Comic Sans MS">
U klikte 0 keer
</text>
</svg>

Als u op de tekst klikt zal het cijfer veranderen. (Bekijk dit voorbeeld).