10.6 Zugriff auf SVG-Elemente mit JavaScript
Mithilfe von JavaScript und dem aus Kapitel 5 bekannten Document Object Model (= DOM) können Sie auf einzelne Elemente von SVG-Grafiken zugreifen, diese verändern oder ergänzen.
Mithilfe des Programms in svg_ereignis.htm wird ein graues Rechteck nach einem Klick-Ereignis mithilfe von JavaScript nach rechts verschoben. Natürlich ist das auch direkt in SVG möglich. Es soll aber gezeigt werden, wie Sie mithilfe von JavaScript Ereignisse bezüglich eines SVG-Elements registrieren, die Werte seiner Eigenschaften lesen und sie verändern. Es folgt der Code:
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>SVG, Ereignisse</title>
<script>
function aenderung()
{
var xPos = parseInt(document.getElementById("bu")
.getAttribute("x"));
xPos += 100;
document.getElementById("bu").setAttribute("x", xPos);
}
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="400px"
height="150px" style="border:1px solid black">
<rect id="bu" x="50" y="20" width="100" height="50"
fill="#bbbbbb" stroke="#000000" stroke-width="2" />
</svg>
<script>
document.getElementById("bu")
.addEventListener("click", aenderung);
</script>
</body></html>
Listing 10.12 Datei »svg_ereignis.htm«
Das Rechteck erhält eine ID, die wie bei HTML-Elementen für die Verbindung zu JavaScript benötigt wird. In der JavaScript-Funktion aenderung() wird wie gewohnt mithilfe der Methode getElementById() auf das SVG-Element zugegriffen. Der Zugriff auf den Wert eines Attributs gelingt mithilfe der Methode getAttribute(). Sie liefert den Wert als Zeichenkette.
Falls der Wert als Zahl weiterverarbeitet werden soll, muss er zunächst mithilfe der Methode parseInt() umgewandelt werden. Im vorliegenden Fall wird der Zahlenwert um 100 erhöht. Anschließend wird dieser neue Wert der Eigenschaft mithilfe der Methode setAttribute() zugewiesen. Sie erwartet zwei Parameter: den Namen und den neuen Wert der Eigenschaft.