web-dev-qa-db-fra.com

Pourquoi le chemin de clip CSS avec SVG ne fonctionne-t-il pas dans Safari?

J'ai un svg en ligne et une image d'arrière-plan sur la bannière Masthead. J'utilise css clip-path pour "couper" l'animation svg avec l'image ci-dessous.

Je le fais fonctionner très bien dans Firefox et chrome mais safari n'applique aucun du clipping/masquage du tout.

J'ai vérifié les spécifications de caniuse avant de commencer ce projet et il énonce les mêmes règles et exceptions qui s'appliquent au chrome, je viens de tester avec chrome d'abord et cela a fonctionné alors j'ai continué à penser que safari aurait le même traitement.

Je me suis gratté la tête en essayant de trouver un moyen de faire fonctionner correctement la coupure en safari.

Comment puis-je faire en sorte que cela fonctionne en safari? Stylo pour référence: https://codepen.io/H0BB5/pen/Xpawgp

HTML

<clipPath id="cross">
    <rect y="110" x="137" width="90" height="90"/>
    <rect x="0" y="110" width="90" height="90"/>
    <rect x="137" y="0" width="90" height="90"/>
    <rect x="0" y="0" width="90" height="90"/>
 </clipPath>

CSS

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}
javascripthtmlcsssvgsafari
13
h0bb5

Vous avez besoin du -webkit- préfixe. Je peux confirmer que vos options de cercle et d'encart fonctionnent dans Safari après avoir ajouté le -webkit- préfixe de votre CSS et JS.

CanIUse.com signale une prise en charge partielle de Safari si vous utilisez le -webkit- préfixe: http://caniuse.com/#search=clip-path

CSS: 

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
  -webkit-clip-path: url(#cross);
}

JS: 

var clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", function (evt) {
  document.getElementById("clipped").style.clipPath = evt.target.value;
  document.getElementById("clipped").style.webkitClipPath = evt.target.value;
});

Stylo à code fourchu: https://codepen.io/techsock/pen/JEyqvM

Mettre à jour

Il semble que cela puisse être un problème avec la mise en œuvre de Safari de clip-path. Il y a un bogue principal a signalé des problèmes de kit Web avec clip-path. Dans JSFiddle, Safari rendra occasionnellement le chemin du clip SVG contenant plusieurs éléments rect correctement, mais pas de manière fiable (voir les captures d'écran ci-dessous). Il ne semble pas y avoir une solution de contournement extrêmement fiable. Il est également noté sur la page MDN à partir de laquelle vous avez extrait cet exemple: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#Browser_compatibility . MDN répertorie Safari comme No Support.

Captures d'écran du comportement de JSFiddle:

✗ Incorrect Incorrect

✗ Incorrect Incorrect

✓ Correct Correct

18
hopkins-matt

Il suffit d'ajouter -webkit- préfixe:

-webkit-clip-path: polygon(50% 0%, 1000% 0%, 50% 100%, -1000% 0%);
0
Murtaza JAFARI