+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [SVG] Combiner plusieurs masques de fusion sur une image? (/showthread.php?tid=6923)
[SVG] Combiner plusieurs masques de fusion sur une image? - Argorate - 18-09-2013
Bonjour,
je cherche a reproduire le même comportement que les masque de fusion sous photoshop en SVG, j'ai réussi via:
Code :
<style>
.test
{
background:url(img.jpg) 0 -100px;
width:50px;
height:50px;
mask: url(#mask);
-webkit-mask: url(mask.svg) top left / cover;
-o-mask: url(mask.svg) top left / cover;
-ms-mask: url(mask.svg) top left / cover;
}
</style>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<image width="50px" height="50px" xlink:href="mask.png"></image>
</mask>
</defs>
</image>
</svg>
<div class="test"></div>Mon problème est que j'aimerais parfois appliquer plusieurs masques en même temps. Je ne sais pas comment faire pour fusionner plusieurs images en une, qui elle même servirait de masque sur mon div (qui à l'image à filtrer en background).
Savez-vous comment faire?
merci.
RE: [SVG]Combiner plusieurs masques de fusion sur une image? - Ter Rowan - 18-09-2013
regarde là : http://svground.fr/clip-et-mask.php
il fusionne une image d'un batiment avec une image d océan
RE: [SVG] Combiner plusieurs masques de fusion sur une image? - Argorate - 18-09-2013
Le problème c'est qu'il "fusionne" en faisant un dégradé d'opacité. Hors moi, je suis dans le cas où j'ai plusieurs masques de fusion, et j'aimerais les cumulés. Il faudrait en quelque sorte additionné les pixels, je sais pas si tu vois ce que je veux dire? Et encore moins si c'est faisable^^
Le but étant: j'ai un masque qui cache le bord Nord de mes cases de terrain (enfin de superposé deux terrains différent et faire une transition plus douce). Mais dans le cas où je veux un bord "Nord" et "Est" en même temps, il me faudrait pouvoir cumulé le mask de base, plus une copie que je fais rotate(90), tu vois le délire?
RE: [SVG] Combiner plusieurs masques de fusion sur une image? - niahoo - 18-09-2013
Bon à la limite tu fais autant de masques que de cas, c'est chiant mais ça peut dépanner :
4 masques à 1 bord
4 masques à 3 bords
(1 masque à 4 bords ?)
6 masques à 2 bords
RE: [SVG] Combiner plusieurs masques de fusion sur une image? - Xenos - 18-09-2013
Si tu peux faire des rotations, tu réduis encore plus le nombre de combinaisons, c'est à dire 6 combinaisons seulement (au lieu de 16):
0000 (aucun bord)
0001 (1 bord)
0011 (2 bords perpendiculaires)
0101 (2 bords parallèles)
0111 (3 bords)
1111 (4 bords)
RE: [SVG] Combiner plusieurs masques de fusion sur une image? - Argorate - 19-09-2013
Oui c'est ce que je pensais faire Xenos. Je chercher juste a savoir si y avait moyen d'avoir encore moins de cas en combinant plusieurs masque.
PS: vous oubliez les angles, mais peut importe^^
RE: [SVG] Combiner plusieurs masques de fusion sur une image? - niahoo - 19-09-2013
Ah oui bien vu Xenos !
Les angles ? avec la rotation ça te fait 15 possibilités mais bien 6 defs à écrire seulement. Le code devra par contre déterminer lequel des ces 15 cas (oui, 16 avec 0 bord) appliquer.
RE: [SVG] Combiner plusieurs masques de fusion sur une image? - Argorate - 19-09-2013
En fait c'est pire que ça, puisqu'il y a toute la combinatoire bord/angle... y a trop de cas. Seule solution viable, trouver cmt fusionner les masques. (retour à la question de départ!?
)