Problem beim Laden eines Bildes in SVG mit JS

[Andreas Möller]

Hallo, 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. Folgender Code in SVG:

<defs>
    <pattern id="pattern1" x="10" y="10" width="111" height="111" patternUnits="userSpaceOnUse">
        <image id="myImage" x="0" y="0" width="115px" height="115px" xlink:href="/Images/080.jpg" />
    </pattern>
</defs>

<rect id="myrect1" x="10" y="10" width="200" height="200" style="stroke: #000000; fill:aliceblue;"></rect>

Jetzt will ich mit Hilfe einer JS-Funktion das fill-Attribute mit dem Bild austauschen.

myrect1.style.fill = url(#pattern1);

Das will JS aber so nicht machen. Wie muss ich das schreiben?

Gruß Andreas

[Matthias Scharwies]

Servus!

Jetzt will ich mit Hilfe einer JS-Funktion das fill-Attribute mit dem Bild austauschen.

myrect1.style.fill = url(#pattern1);

Das will JS aber so nicht machen. Wie muss ich das schreiben?

Wenn url(#pattern1) eine Variable wäre, wäre das so richtig. Wenn es eine Zeichenkette ist, benötigt es Anführungszeichen.

Gruß Andreas

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Andreas Möller

myrect1.style.fill = url(#pattern1);

Das will JS aber so nicht machen. Wie muss ich das schreiben?

In Anführungszeichen. myrect1.style.fill erwartet einen String, nicht das Ergebnis einer (nicht definierten) JavaScript-Funktion url().

LLAP 🖖

[Andreas Möller]

vielen Dank für die Antwort. Klappt jetzt bei mit auch genauso. "Alles" vorher versucht. Aber auf diese Variante bin ich nicht gekommen.

[Vollzitat entfernt]

[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

[Matthias Scharwies]

Servus!

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

Ich habe es ins Wiki aufgenommen:

• SVG/Grafiken_erstellen

Ich hoffe, dass du nichts dagegen hast.

Herzliche Grüße

Matthias Scharwies

[ThomasM]

Hallo Matthias,

Ich hoffe, dass du nichts dagegen hast.

Danke, wobei das so prominent auch nicht sein müsste. Auf meiner ebenfalls bei Euch verlinkten "SVG – Learning by Coding"-Startseite ist das Tool ja ebenfalls verfügbar.

So können Sie SVG-Dokumenten entwickeln, ohne dauernd zwischen Editor und Browser umschalten zu müssen.

Besser gefällt mir:

So können Sie mit SVG experimentieren, ohne dauernd zwischen Editor und Browser umschalten zu müssen.

Grüße,
Thomas

[Gunnar Bittersmann]

@@ThomasM

Zum Testen kann meine kleine Experimentierumgebung dienen, Code dort einfügen.

Nice. JavaScript muss man in script-Elemente packen?

Codepen tut’s als Experimentierumgebung auch; da kann man SVG und JS getrennt halten: Pen

LLAP 🖖

[ThomasM]

Hallo Gunnar,

Nice. JavaScript muss man in script-Elemente packen?

Ja, intern oder extern wie in einem SVG-Dokument auch, wobei das Tool eben für meine Bedürfnisse in Livedemos entstand. Es war ursprünglich noch simpler konzipiert – danach kamen weitere Ideen für mehr Komfort wie die Code-Buttons hinzu.

Der Vorteil ist für mich, dass ich auch lokal mit nur einem HTML-Dokument schnell etwas zeigen kann, gerade wenn kein Netz verfügbar ist. Passiert ja in Vorlesungsräumen gern mal.

Codepen tut’s als Experimentierumgebung auch; da kann man SVG und JS getrennt halten: Pen

Sicher, aber damit möchte ich auch gar nicht konkurrieren.

Grüße,
Thomas