Est-il possible d'utiliser des masques Webkit CSS avec SVG sans fichier externe?

Webkit permet l'utilisation d'un fichier SVG externe comme masque pour tout élément HTML. À savoir:Est-il possible d'utiliser des masques Webkit CSS avec SVG sans fichier externe?

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

Entraînant:

(Plus d'informations ici: http://webkit.org/blog/181/css-masks/)

Est-ce que quelqu'un sait s'il y a un moyen de le faire sans un fichier SVG externe? Plus précisément, peut-il être fait avec SVG généré à partir de JavaScript?

Source

2010-10-28 juandopazo

Il semble très probable que cela pourrait être fait en utilisant une URI de données. Si vous faites un lien vers une démo en direct, je serais heureux de le tester. Aussi, quand vous dites "SVG généré à partir de JavaScript", voulez-vous dire dans le navigateur, ou hors du navigateur? – jbeard4

Dans le navigateur. Par exemple en utilisant la bibliothèque Raphael ou document.createElementNS(). Je ne suis pas sûr que les URI de données fonctionneront, mais je vais essayer. Merci! – juandopazo

Eh bien, deux ans se sont écoulés depuis que je pose cette question et le paysage du navigateur beaucoup changé. Voici un exemple de exactement ce que je voulais faire, ce qui ne fonctionne que dans Firefox pour l'instant: http://mozilla.seanmartell.com/persona/

Comme vous pouvez le voir il y a un div id chameleon qui a le style suivant:

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

#clip1 des points à un élément clipPath à l'intérieur d'un élément SVG en ligne qui est lié à une forme.

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

Maintenant, c'est faisable dans Firefox.

Merci @mart3ll pour l'exemple pratique!

Source

2012-10-03 16:48:36 juandopazo

Il fonctionne aussi dans Chrome et Safari. Malheureusement IE11 est un non non. –

Je ne suis pas sûr de l'extension spécifique à WebKit mais Mozilla vous permet d'appliquer des effets SVG comme des masques et des filtres sur des éléments HTML. Ceux-ci peuvent être définis dans des fichiers externes ou directement dans le balisage. Voir this post. Ce n'est pas une spécification pour le moment, mais les groupes de travail SVG et CSS travaillent ensemble pour spécifier cette approche. Voir le Working Group's page (bien que seuls les filtres, pas les masques y sont explicitement mentionnés).

Vous pouvez généralement lier à quelque chose en SVG en incluant l'ID de l'élément dans la valeur de l'URL (par exemple, url (#someID)). Vous pourriez essayer de générer le SVG via JS, en lui donnant un identifiant et l'injecter dans le document pour voir si cela fonctionne. Il n'y a pas de spécification car c'est une extension WebKit donc c'est difficile à dire sans l'essayer.

Source

2011-01-10 22:05:36

Oui Je crois que c'est possible. Récemment, j'ai utilisé PHP pour générer le fichier SVG. Voici un exemple que je fait:

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

Consultez également http://raphaeljs.com/

Source

2012-10-03 03:42:06 brokeneye

Ceci est certainement intéressant, mais je pense que la question est de savoir si cela peut être fait avec SVG en HTML, plutôt qu'en SVG autonome. – mahemoff

Est-il possible d'utiliser des masques Webkit CSS avec SVG sans fichier externe?

Répondre

Questions connexes