Animation SVG dans CSS

Bonjour à tous,

J'ai un SVG dans lequel j'ai défini un mask (composé de plusieurs polygon) et une image :

<svg id="mysvg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25%" height="25%" viewBox="0 0 720 480">
	<defs>
		<mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
		<polygon fill="white" points="0.894,1.000 0.894,0.351 0.787,0.439 0.787,0.736 0.213,0.264 0.213,0.439"/>
		<polygon fill="white" points="0.106,0.649 0.213,0.561 0.213,0.264 0.787,0.736 0.787,0.561 0.106,0.000"/>
		<polygon fill="white" points="0.393,0.588 0.287,0.499 0.106,0.649 0.106,0.000 0.000,0.088 0.000,0.912"/>
		<polygon fill="white" points="0.606,0.412 0.500,0.324 0.894,0.000 1.000,0.087"/>
		<polygon fill="white" points="0.894,1.000 1.000,0.912 1.000,0.087 0.606,0.412 0.713,0.501 0.894,0.351"/>
		<polygon fill="white" points="0.106,1.000 0.500,0.676 0.393,0.588 0.000,0.912"/>
		</mask>
	</defs>

	<image id="image1" xlink:href="images/image.jpg" width="720px" height="480px"></image>
</svg>

Je voudrai appliquer le masque lors du hover sur l'image (ça ça marche), mais également avec un effet de transition (genre agrandissement de la taille du mask avec mask-size), et ça je n'y arrive pas...

#image1:hover {
	cursor: pointer;
	mask: url(#mask1);
	mask-size: 50% 50%;
	-webkit-mask: url(#mask1);
	-webkit-mask-size: 50% 50%;
}

Est-ce quelqu'un aurait une idée sur ce que je fais mal ?
J'ai essayé avec des keyframes sans grand succès non plus (mais je m'y prend sûrement très mal également)...

Merci d'avance !
Modifié par Otarie10 (23 Dec 2020 - 22:34)