SVG javascript-Skript

Mit JavaScript kann ein SVG-Skript geschrieben werden. Durch die Skriptierung können Sie SVG-Elemente ändern und ihnen Animationen oder den Zuhörung von Mausereignissen auf Formen hinzufügen. Wenn SVG in eine HTML-Seite eingebettet wird, können SVG-Elemente in JavaScript verwendet werden.

Sie können SVG-Skripte mit JavaScript schreiben. Durch das Schreiben von Skripten können Sie SVG-Elemente ändern, ihre Animationen festlegen oder auf Mausereignisse auf den Formen reagieren.

Wenn SVG in eine HTML-Seite eingebettet wird, können Sie SVG-Elemente in JavaScript wie HTML-Elemente verwenden. Der JavaScript-Code sieht gleich aus.

Dieser Artikel zeigt Ihnen, wie Sie SVG-Elemente mit JavaScript verarbeiten können, ohne jedoch JavaScript selbst zu erklären. Um die Beispiele in diesem Artikel zu verstehen, müssen Sie bereits über einige Kenntnisse in JavaScript verfügen.

SVG-Skript-Beispiel

Dies ist ein einfaches Beispiel für die Script-Schreibung in SVG, bei dem die Größe des SVG-Rechtecks geändert wird, wenn Sie auf den Button klicken.

<svg　width="500"　height="100">
　　　　<rect id="rect1" x="10" y="10" width="50" height="80"
　　　　　　　　　　style="stroke:#000000; fill:none"/>
</svg>
<input id="button1" type="button" value="Change Dimensions"
　　　　　　　　　　　　onclick="changeDimensions()"/>
<script>
　　　　function changeDimensions() {
　　　　　　　　document.getElementById("rect1).setAttribute("width", "10);
　　　　}
</script>

Versuchen Sie, auf den Button zu klicken, um zu sehen, was passiert.

Verwenden Sie die ID, um die Referenz auf das SVG-Element zu erhalten

Sie können die Referenz auf das SVG-Shape mit der Funktion document.getElementById() erhalten. Hier ist ein Beispiel:

var svgElement = document.getElementById("rect1");

Dieses Beispiel holt die Referenz auf das Element mit der ID "rect1der Referenz des SVG-Elements (ID in der id-Eigenschaft des SVG-Elements angegeben).

Ändern Sie den Wert der Eigenschaft

Sobald Sie eine Referenz auf das SVG-Element haben, können Sie die Eigenschaften mit der Funktion setAttribute() ändern. Hier ist ein Beispiel:

var svgElement = document.getElementById("rect1);svgElement.setAttribute("width", "10);

Dieser Beispielcode setzt die width-Eigenschaft des ausgewählten SVG-Elements. Sie können mit der Funktion setAttribute() jede andere Eigenschaft festlegen, einschließlich des style-Attributs.

Sie können auch den Wert der Eigenschaft mit der Funktion getAttribute() abrufen. Hier ist ein Beispiel:

var svgElement = document.getElementById("rect1);var width = svgElement.getAttribute("width");

Ändern Sie die CSS-Eigenschaften

Durch Verweis auf die CSS-Eigenschaften über das style-Attribut des SVG-Elements können die CSS-Eigenschaften des SVG-Elements geändert werden. Ein Beispiel für die Festlegung der stroke CSS-Eigenschaft ist wie folgt:

var svgElement = document.getElementById("rect1");
svgElement.style.stroke = "#ff0000";

Sie können auf diese Weise auch jede andere CSS-Property setzen. Legen Sie einfach den Namen auf svgElement.style. auf der zweiten Zeile und setzen Sie ihn auf einen bestimmten Wert.

Sie können auch den Wert von CSS-Attributen über das style-Attribut lesen. Hier ist ein Beispiel:

var svgElement = document.getElementById("rect1");
var stroke = svgElement.style.stroke;

Dieser Beispielcode liest den Wert der CSS-Property stroke.

CSS-Attribute mit Bindestrichen im Namen (z.B. stroke-width）muss durch [''] Konstruktion referenziert werden. Dies geschieht, weil Attribute mit Bindestrichen in JavaScript ungültig sind. Daher können Sie nicht schreiben

element.style.stroke-width

Ganz相反， Sie müssen schreiben

element.style['stroke-width"]

Auf diese Weise können Sie auch die Bindestriche im Namen verwenden, um CSS-Attribute zu referenzieren.

Event-Listener

Sie können den Event-Listener direkt in das SVG auf die SVG-Form hängen, wie Sie es mit HTML-Elementen tun. Hier ist ein Beispiel zur Hinzufügung von onmouseover- und onmouseout-Event-Listenern:

<svg　width="500"　height="100">　　　　
<rect x="10" y="10" width="100" height="75"　　　　
style="stroke: #000000; fill: #eeeeee;"　　　　
onmouseover="this.style.stroke = '#ff0000'; this.style['stroke-width'] =　5;"　　　　
onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] =　1;"　　　　
/>　　　　
</svg>

Dieser Beispielcode ändert die Farbe und die Breite des Stils, wenn der Mauszeiger auf das Rechteck gehalten wird, und stellt die Farben und Breiten wieder her, wenn der Mauszeiger das Rechteck verlässt. Versuchen Sie es mit dem folgenden Beispiel. Verschieben Sie den Mauszeiger auf die Form und bewegen Sie ihn wieder weg, um die Wirkung des Event-Listeners zu sehen.

Sie können auch die Funktion addEventListener() verwenden, um einen Event-Listener auf ein SVG-Element zu hängen. Hier ist ein Beispiel:

var svgElement = document.getElementById("rect1");
svgElement.addEventListener("mouseover", mouseOver);
function mouseOver() {
　　　　alert("event ausgelöst!");
}

Dieser Beispiel fügt eine Event-Listener-Funktion für das Ereignis MouseOver hinzu. Dies bedeutet, dass die Event-Listener-Funktion aufgerufen wird, wenn der Benutzer den Mauszeiger auf das SVG-Element bewegt.

Animierte SVG-Formen

Um SVG-Formen animiert zu machen, müssen Sie den JavaScript-Funktion wiederholt aufrufen. Diese Funktion wird verwendet, um die Position oder Größe der Form zu ändern. Wenn die Funktion wiederholt aufgerufen wird und der Abstand sehr kurz ist, wird die Position oder Größe der Form ebenfalls in sehr kurzen Abständen aktualisiert, was den Eindruck einer Animation erzeugt.

Dies ist ein Beispiel für eine SVG-Skript-Animation. Unten im Beispiel ist der Code zur Erstellung dargestellt. Klicken Sie auf die beiden Schaltflächen unter dem SVG-Bild, um die Animation zu starten und zu stoppen.

Dies ist der Code, der zur Erstellung der obigen Animation erforderlich ist:

<svg　width="500"　height="100">
　　　　<circle　id="circle1"　cx="20"　cy="20"　r="10"
　　　　　　　　　　　　style="stroke:　none;　fill:　#ff0000;"/>
</svg>
<script>
　　　　var　timerFunction　=　null;
　　　　function　startAnimation()　{
　　　　　　　　if(timerFunction　==　null)　{
　　　　　　　　　　　　timerFunction　=　setInterval(animate,　20);
　　　　　　　　}
　　　　}
　　　　function　stopAnimation()　{
　　　　　　　　if(timerFunction　!=　null){
　　　　　　　　　　　　clearInterval(timerFunction);
　　　　　　　　　　　　timerFunction　=　null;
　　　　　　　　}
　　　　}
　　　　function　animate()　{
　　　　　　　　var　circle　=　document.getElementById("circle1");
　　　　　　　　var　x　=　circle.getAttribute("cx");
　　　　　　　　var　newX　=　2　+　parseInt(x);
　　　　　　　　if(newX　>　500)　{
　　　　　　　　　　　　newX　=　20;
　　　　　　　　}
　　　　　　　　circle.setAttribute("cx",　newX);
　　　　}
</script>
<br/>
<input type="button" value="Animation starten" onclick="startAnimation();">
<input type="button" value="Animation stoppen" onclick="stopAnimation();">

Diese beiden HTML-Buttons haben einen onclick-Abhörer. Diese Abhörer rufen die Funktionen startAnimation() und stopAnimation() auf, um die Animation zu starten und zu stoppen. Die Animation beginnt durch die Einstellung eines Timers, der alle20 Millisekunden der Animate()-Funktion aufgerufen. Durch erneutes Löschen dieser Timer-Funktion kann die Animation gestoppt werden.

Die Animation wird im animate()-Funktion intern ausgeführt. Zunächst wird durch die Funktion document.getElementById() der Zugriff auf das <circle>-Element im SVG-Bild erhalten. Dann wird das cx-Attribut des Kreises gelesen und in eine Zahl umgewandelt. Anschließend wird2zum cx-Wert hinzugefügt. Wenn der neue x-Wert größer ist als500, dann wird es auf 0 zurückgesetzt20. Schließlich wird der neue x-Wert in das <circle>-Element-Attribut cx zurückgesetzt. Der Kreis bewegt sich somit in die neue x-Position.