Récemment,  dans le cadre du projet edeally.fr nous voulions découper une image dynamiquement selon une certaine forme. Le but est d’avoir un affichage similaire aux applications mobiles IOS et Android.
Voici un exemple du résultat final :

Image d’origine

Image après traitement

Sans titre

On commence par Chrome

Dans un premier, le but était d’utiliser directement une propriété css3 pour réaliser ce traitement. Après plusieurs recherches, je trouve mon bonheur la propriété clip-path utilisée avec le paramètre « polygon » . Il suffit de préciser les différents points du tracé pour « découper » l’image comme souhaité.

Exemple :

[css]

img.clip {
clip-path : polygon(0 0, 0 100 , 100 100 ,100 0 );
}
[/css]

Simple tracé en carré.

Après avoir trouvé le bon polygon pour correspondre à la forme souhaitée,  je lance mon test (chrome) et là formidable, cela fonctionne exactement comme attendu.

Par la suite, je lance firefox(plus que confiant) et malheureusement, cela ne fonctionne pas. A tout hasard je teste sous internet explorer, évidemment pas mieux.

On continue sous firefox

Après de nouvelles recherches, je trouve enfin le code fonctionnant sous firefox. Pour celui ci, il faut faire référence à un svg.
Dans mon code html je rajoute donc une balise svg :

[html]

<svg><defs><clipPath id="path"><polygon points="0 0, 0 100, 100 100, 100 0"></polygon></clipPath></defs></svg>

[/html]

Ensuite, il suffit d’associer le svg en css :

[css]
img.clip {
clip-path : url(‘#path’);
}
[/css]

Test sous firefox=> OK o/. Je regarde le résultat sous chrome et … rien, cela ne fonctionne pas. Pas grave, j’ai un code qui fonctionne sous chrome, un autre sous firefox, j’associe le tout, le résultat est concluant !

On finit par internet explorer

On arrive à la dernière étape, je lance internet explorer (11 dans un premier temps) et … rien , déception. Après de nombreuses très nombreuses recherches, je me rends à l’évidence, il n’est pas possible d’utiliser « clip-path » en tant que propriété css et être compatible multi navigateur en même temps.

Après quelques recherches supplémentaires, je trouve enfin la solution à mon problème : utiliser directement le tout sous svg.
Ainsi, à la place d’avoir une balise « img » on va afficher notre image en utilisant svg. C’est du coup un peu moins simple, mais cela à la mérite d’être compatible webkit / firefox / internet explorer :

[html]

<svg class="svg-mask" width="350" height="350">
<defs>
<clipPath id="path">
<polygon points="0 0, 0 100, 100 100 , 100 0"></polygon>
</clipPath>
</defs>
<image width="100%" height="100%" clip-path="url(‘#path’)" xlink:href="<LIEN_IMAGE>" preserveAspectRatio="xMinYMin meet"></image>
</svg>

[/html]

Ceci reste complètement modifiable dynamiquement vie javascript.

Je n’avais jamais joué avec svg avant, c’est peut être aussi pour cela que j’ai mis autant de temps à trouver la bonne solution. J’aurais préféré n’avoir à utiliser qu’une simple propriété css pour plus de simplicité.