Julius: Frage zum Wiki-Artikel „responsiv“

Beitrag lesen

problematische Seite

Hallo Richard,

Wenn die SVG über das img-Element eingebunden wird, wird das eingebettete JavaScript nicht ausgeführt.

Nein, das trifft nicht zu wenn die Scripte richtig eingesetzt werden, aber es kann Probleme mit dem Namensraum geben.

Was ist dann in diesem Experiment schief gelaufen (die SVG habe ich aus dem Wiki zusammenkopiert)?

<svg viewbox="0 0 150 150" xmlns="http://www.w3.org/2000/svg" onload="document.getElementById('text2').textContent='Hallo!';">
    <defs>
      <!-- der Script Bereich -->
      <script type="text/javascript">
      <![CDATA[
document.addEventListener("DOMContentLoaded", function () {
	function aenderung() {
		var farben = new Array("red", "skyblue", "#dfaa20", "#ebf5d7", "#e4ebf2",
			"#5a9900", "lime", "#df6c20", "brown", "#5c82d9", "burlywood",
			"blueviolet", "#c32e04", "#ffebe6", "#5c82d9");
		var fuellFarbe = Math.floor(farben.length * Math.random());
		if (fuellFarbe == farben.length) {
			fuellFarbe = farben.length - 1;
		}
		fuellFarbe = farben[fuellFarbe];
		document.getElementById("kreis").setAttribute("fill", fuellFarbe);
	}
	document.getElementById("kreis").addEventListener("click", aenderung);
	document.getElementById("text").addEventListener("click", aenderung);
});
      ]]>
      </script>
    </defs>
    <circle id="kreis" cx="100" cy="100" r="70" fill="#dfac20" />
    <text id="text" x="100" y="100">Klick mich!</text>
    <text id="text2" x="100" y="140"></text>
</svg>

Stand-Alone funktioniert es nämlich, so aber nicht:

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
  </head>
  <body>
<img src="javascript.svg" alt="">
  </body>
</html>

Gruß
Julius