Problem beim Laden eines Bildes in SVG mit JS

[ThomasM]

Hallo Andreas,

ich möchte ein Rechteck in SVG mit Hilfe von JavaScript eine Textur als Fülling zuweisen. Ich weiß nicht genau, wie das zu schreiben ist.

Wie schon gesagt wurde, die Patternzuweisung in Anführungszeichen verwenden. Je nach Ausführungskontext könnte sich auch eine Bezugnahme mittels getElementById() oder querySelector() anbieten.

Als Schnelltest mit Kreis statt Bild im pattern-Element umgesetzt:

<defs>
  <pattern id="pattern1" x="10" y="10" width="111" height="111" patternUnits="userSpaceOnUse">
    <circle cx="45" cy="45" r="40" fill="red"/>
  </pattern>
  <script>
    myrect1.style.fill = "url(#pattern1)";
    // document.getElementById("myrect1").style.fill = "url(#pattern1)";
    // document.querySelector("#myrect1").style.fill = "url(#pattern1)";
  </script>
</defs>
<rect id="myrect1" x="10" y="10" width="200" height="200" style="stroke: #000000; fill:aliceblue;"/>

Zum Testen kann meine kleine Experimentierumgebung dienen, Code dort einfügen. Einige direkt nutzbare Snippets stehen ebenfalls zur Verfügung.

Hinweis: Ist eigentlich als Tool für meinen Eigenbedarf im Rahmen von Kursen entstanden, um schnell SVG-Details demonstrieren zu können, ohne dauernd zwischen Editor und Browser umschalten zu müssen.

Grüße,
Thomas