Andreas Möller: Problem beim Laden eines Bildes in SVG mit JS

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

akzeptierte Antworten

  1. 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

    --
    Es gibt viel zu tun - packen wir's an: ToDo-Liste gewünschte Seiten
  2. @@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 🖖

    --
    “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    1. 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]

  3. 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

    1. 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:

      Ich hoffe, dass du nichts dagegen hast.

      Herzliche Grüße

      Matthias Scharwies

      --
      Es gibt viel zu tun - packen wir's an: ToDo-Liste gewünschte Seiten
      1. 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

    2. @@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 🖖

      --
      “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      1. 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