È possibile impostare un elemento background-image per un elemento SVG <path>?Riempimento elemento percorso SVG con un'immagine di sfondo
Per esempio, se ho impostato l'elemento class="wall", lo stile CSS .wall {fill: red;} opere, ma .wall{background-image: url(wall.jpg)} non lo fa, né .wall {background-color: red;}.
Puoi farlo facendo lo sfondo in un pattern:
<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>
Regolare la larghezza e l'altezza in base alla vostra immagine, quindi fare riferimento dal 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)" />
molto bello, funziona anche con le immagini di base64? invece di wall.jpg qualcosa come 'data: image/png; base64, iVBORw0KGgoAA' come faresti nel normale CSS? – Christoph
@Christoph Non lo so, provalo e guarda. – robertc
@robertc Ho provato e non ha funzionato, ma ho avuto un elemento di stile duplicato. Eliminandolo, ha funzionato bene;) – Christoph
La risposta di "robertc" è svg - e questo è simile a ciò che viene utilizzato dal codice del percorso d3.js. Sono riuscito a creare din def per i percorsi d3.js applicando quanto segue.
sono riuscito a farlo funzionare definendolo come il seguente
chart.append("defs")
.append('pattern')
.attr('id', 'locked2')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 4)
.attr('height', 4)
.append("image")
.attr("xlink:href", "locked.png")
.attr('width', 4)
.attr('height', 4);
è questo d3.js? se è così, dovresti menzionarlo perché non è nella domanda tag – BiAiB
Beh, non ho scritto la domanda? Ho fatto una ricerca per il codice - ho trovato questa pagina. Ha adattato il conto e sembrava funzionare per me. –
So che non hai scritto la domanda. Il questionario chiede soluzioni svg e stai scaricando il codice javascript. Non è nemmeno un javascript puro, quindi hai usato una specie di libreria. Sospetto che sia d3.Ma quando un utente casuale entra nella tua risposta, è inutile perché non ha idea di come usarlo. Sto votando questo fino a che non elabori. – BiAiB
Se il vostro svg è singolo colore, il modo migliore è la conversione SVG a Font file.
È possibile utilizzare lo strumento icomoon.io per concatenare tutti i file SVG in file di font e utilizzarli come classi di icone di font, come Fontawesome.
Questo non sembra rispondere alla domanda originale affatto. –
Mostra come impostare l'immagine di sfondo per il testo SVG, facoltativamente in base al carattere: http://stackoverflow.com/a/10853878/405017 – Phrogz
per coloro che cercano ulteriori informazioni approfondite in questo articolo [collegamento ] (http://vanseodesign.com/web-design/svg-pattern-attributes/) –