Maschere SVG

roberto.fr

Maschere SVG

Buongiorno a tutti,
sono un paio di settimane che sto impazzendo con le maschere in SVG :

ho creato una <div> al quale ho assegnato in css queste proprietà CSS


clip-path: url(../img/mask_p.svg#mask_p);
-webkit-clip-path: url(../img/mask_p.svg#mask_p);

dove dichiaro di cercare nella cartella immagini il file SVG e di usare il clip-path con l'ID mask_p.
Il codice del mio file SVG è questo :


<svg>
     <defs>
        <clipPath id="mask_p">
            <path fill="#FFFFFF" d="M161.6,132.1C141.7,152.8,95.3,174,90,174s-51.7-21.2-71.6-41.9C14,127.7,14,92.6,14,90s0-37.7,4.4-42.1
                    C38.3,27.2,84.7,6,90,6s51.7,21.2,71.6,41.9C166,52.3,166,87.4,166,90S166,127.7,161.6,132.1z"/>
        </clipPath>
    </defs>
</svg>

Su firefox la maschera è applicata bene alla div, quindi vedo bene l'esagono che ho creato, mentre su chrome e sugli smartphone vedo un quadrato e la maschera non funziona per niente.

Qualcuno potrebbe spiegarmi perchè non funziona?

Vi ringrazio in anticipo.

roberto.fr

Sono riuscito a risolvere da solo.

Il problema, se a qualcuno puo interessare, era che su chrome dovevo usare una proprietà CSS diversa.

Quindi il codice che ho usato è questo :


-webkit-clip-path: url(../img/mask_p.svg);
clip-path: url(../img/mask_p.svg#mask_p);
 -webkit-mask: url(../img/mask_p.svg);

Grazie mille lo stesso a tutti.