È possibile utilizzare le maschere di css webkit con SVG senza un file esterno?

Webkit consente l'uso di un file SVG esterno come maschera per qualsiasi elemento HTML. Vale a dire:È possibile utilizzare le maschere di css webkit con SVG senza un file esterno?

<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">

Con conseguente:

(Maggiori informazioni qui: http://webkit.org/blog/181/css-masks/)

Qualcuno sa se c'è un modo per farlo senza un file in formato SVG esterno? Più specificamente, può essere fatto con SVG generato da javascript?

fonte

2010-10-28 juandopazo

Sembra abbastanza probabile che ciò possa essere fatto utilizzando un URI di dati. Se ti colleghi a una demo dal vivo, sarei felice di testarlo. Inoltre, quando dici "SVG generato da JavaScript" intendi nel browser o fuori dal browser? – jbeard4

Nel browser. Ad esempio, utilizzando la libreria Raphael o plain document.createElementNS(). Non sono sicuro che gli URI dei dati funzioneranno, ma farò un tentativo. Grazie! – juandopazo

Beh, sono passati due anni da quando ho fatto questa domanda e il paesaggio del browser cambiato molto. Ecco un esempio di esattamente quello che volevo fare, che funziona solo in Firefox per ora: http://mozilla.seanmartell.com/persona/

Come potete vedere c'è un div con id chameleon che ha il seguente stile:

<div id="chameleon" style="clip-path:url(#clip1); -webkit-mask-box-image: url(mask.png);">

#clip1 punti a un elemento clipPath all'interno di un elemento SVG incorporato che si collega a una forma.

<clipPath id="clip1"><use xlink:href="#shape1"/></clipPath>

Quindi ora è possibile in Firefox.

Grazie @mart3ll per l'esempio pratico!

fonte

2012-10-03 16:48:36 juandopazo

Funziona anche in Chrome e Safari. Sfortunatamente IE11 è un no no. –

Non sono sicuro dell'estensione specifica di WebKit, ma Mozilla consente di applicare effetti SVG come maschere e filtri su elementi HTML. Questi possono essere definiti in file esterni o direttamente nel markup. Vedi this post. Al momento non è disponibile alcuna specifica, ma i gruppi di lavoro SVG e CSS stanno lavorando insieme per definire questo approccio. Vedi lo Working Group's page (sebbene solo i filtri, non le maschere siano menzionate esplicitamente lì).

In genere è possibile collegare a qualcosa in SVG includendo l'id dell'elemento nel valore dell'URL (ad esempio url (#someID)). Potresti provare a generare SVG tramite JS, assegnargli un id e inserirli nel documento e vedere se funziona. Non ci sono specifiche perché è un'estensione WebKit, quindi è difficile da dire senza provarlo.

fonte

2011-01-10 22:05:36

Sì, credo sia possibile. Recentemente ho usato PHP per generare il file SVG. Ecco un esempio che ho fatto:

http://jsfiddle.net/brokeneye/ygsKm/

controllare anche http://raphaeljs.com/

fonte

2012-10-03 03:42:06 brokeneye

Questo è certamente interessante, ma penso che la domanda si stia chiedendo se può essere fatto con SVG all'interno di HTML, piuttosto che SVG standalone. – mahemoff

È possibile utilizzare le maschere di css webkit con SVG senza un file esterno?

risposta

Problemi correlati