SVG/Elemente/Definitionsabschnitt/script

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit dem Element script können Sie einen oder mehrere Script-Bereiche im Definitionsabschnitt eines SVG-Dokuments definieren. Innerhalb von Script-Bereichen können Sie Anweisungen der verwendeten Script-Sprache notieren.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Beachten Sie: Da in JavaScript-Code anders als in XML-Dokumenten Zeichen wie > vorkommen dürfen, muss Code in CDATA gekapselt werden.
Beispiel
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <script type="text/ecmascript"> <![CDATA[ function meldung(){ alert("SVG-Element wurde angeklickt!"); } ]]> </script> <circle cx="100" cy="100" r="25" fill="red" onclick="meldung()" /> </svg>

externe Scripte einbinden[Bearbeiten]

Wenn Sie im Script-Bereich ein externe Script-Datei referenzieren wollen, müssen Sie dies mit dem xlink:href-Attribut tun.

Beispiel
<script xlink:href="externeDatei.js" type="text/ecmascript"></script>

Scripte im Definitionsbereich von SVG-Fragmenten[Bearbeiten]

Natürlich können Sie das Script-Element auch verwenden, wenn die SVG-Grafik als Fragment in einem HTML-Dokument integriert ist, auch wenn dann eine Einbindung im head oder am Ende des body wohl einfacher und übersichtlicher ist.

Beispiel ansehen …
  <svg viewbox="0 0 880 410">
    <defs>
      <!-- der Script Bereich -->
      <script type="text/javascript">
      <![CDATA[
        function meldung(){
          alert("SVG-Element wurde angeklickt!");
        }
      ]]>
      </script>
    </defs>
  
    <circle cx="100" cy="100" r="25" fill="#c32e04" onclick="meldung()" />
	
  </svg>

Referenz[Bearbeiten]