Riempi l'elemento del percorso SVG con un'immagine di sfondo

166

È possibile impostare un background-imageper un <path>elemento SVG ?

Ad esempio, se imposto l'elemento class="wall", lo stile CSS .wall {fill: red;}funziona, ma .wall{background-image: url(wall.jpg)}non lo fa neanche .wall {background-color: red;}.

— jbochi
fonte

Mostrando come impostare l'immagine di sfondo per il testo SVG, opzionalmente su una base per-carattere: stackoverflow.com/a/10853878/405017

— Phrogz

per chi è alla ricerca di maggiori informazioni in profondità, consulta questo link

— Paulo Bueno,

261

Puoi farlo trasformando lo sfondo in un modello :

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

Regola la larghezza e l'altezza in base alla tua immagine, quindi fai riferimento al percorso in questo modo:

<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)" />

Esempio funzionante

— robertc
fonte

molto bello, funziona anche con immagini base64? invece di wall.jpg qualcosa di simile data:image/png;base64,iVBORw0KGgoAAa un normale CSS?

— Christoph,

@Christoph Non lo so, provalo e vedi.

— robertc,

@robertc Ho provato e non ha funzionato, ma avevo un elemento di stile duplicato. Eliminandolo, ha funzionato perfettamente;)

— Christoph,

@robertc: ho una domanda sulla tua risposta. Il modello inizia alle coordinate globali (0,0). È possibile consentire al modello di utilizzare il sistema di coordinate locale dall'oggetto collegato a? Voglio disegnare un rettangolo in diversi punti del mio svg e ciò che accade è che il motivo si ripete sullo sfondo del foro e gli oggetti vengono usati come maschere.

— Tobias Golbs,

@robertc, aggiorna la tua risposta per menzionare che xlink:hrefè deprecato da SVG 2 e da usare semplicemente hrefora. developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

— Blake Regalia,