Füllen Sie das SVG-Pfadelement mit einem Hintergrundbild

166

Ist es möglich, ein background-imagefür ein SVG- <path>Element festzulegen ?

Wenn ich zum Beispiel das Element setze class="wall", .wall {fill: red;}funktioniert der CSS-Stil , aber .wall{background-image: url(wall.jpg)}auch nicht.wall {background-color: red;} .

— jbochi
quelle

Zeigen, wie das Hintergrundbild für SVG-Text optional pro Zeichen festgelegt wird: stackoverflow.com/a/10853878/405017

— Phrogz

für diejenigen, die mehr in Deep Info suchen, überprüfen Sie diesen Artikel Link

— Paulo Bueno

261

Sie können dies tun, indem Sie den Hintergrund in ein Muster verwandeln :

<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
</defs>

Passen Sie die Breite und Höhe entsprechend Ihrem Bild an und verweisen Sie dann vom Pfad aus wie folgt:

<path d="M5,50
         l0,100 l100,0 l0,-100 l-100,0
         M215,100
         a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
         M265,50
         l50,100 l-100,0 l50,-100
         z"
  fill="url(#img1)" />

Arbeitsbeispiel

— Robertc
quelle

Sehr schön, funktioniert das auch mit Base64-Bildern? statt wall.jpg so etwas wie data:image/png;base64,iVBORw0KGgoAAin normalem CSS?

— Christoph

@Christoph Ich weiß nicht, versuchen Sie es und sehen Sie.

— Robertc

@robertc Ich habe es versucht und es hat nicht funktioniert, aber ich hatte ein doppeltes Stilelement. Durch die Beseitigung hat es gut funktioniert;)

— Christoph

@robertc: Ich habe eine Frage zu Ihrer Antwort. Das Muster beginnt bei den globalen Koordinaten (0,0). Ist es möglich, dass das Muster das lokale Koordinatensystem des Objekts verwendet, an das es angehängt ist? Ich möchte ein Rect an verschiedenen Stellen in meinem SVG zeichnen und was passiert ist, dass das Muster im Lochhintergrund wiederholt wird und die Objekte als Masken verwendet werden.

— Tobias Golbs

@robertc Bitte aktualisieren Sie Ihre Antwort, um zu erwähnen, dass xlink:hrefsie seit SVG 2 veraltet ist, und um sie hrefjetzt einfach zu verwenden . developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

— Blake Regalia