web-dev-qa-db-ja.com

SVGのCSSクリップパスがSafariで機能しないのはなぜですか？

マストヘッドにインラインsvgと背景画像があります。私はcssクリップパスを使用して、以下の画像でsvgアニメーションを「切り取り」ます。

私はそれをfirefoxとchromeでうまく機能していますが、サファリはクリッピング/マスキングをまったく適用していません。

このプロジェクトを開始する前にcaniuseの仕様を確認しましたが、Chromeに適用されるのと同じルールと例外が記載されています。最初にchromeでテストしたところ、動作しましたので、サファリが同じになることを確認し続けました処理。

私はサファリでクリッピングを適切に機能させる方法を理解するために頭を悩ませてきました。

これをサファリで機能させるにはどうすればよいですか？参考のためのペン： 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

-webkit-接頭辞が必要です。 CSSとJSに-webkit-接頭辞を追加すると、Safariでサークルとインセットのオプションが機能することを確認できます。

CanIUse.comは、-webkit-接頭辞を使用している場合、Safariの部分的なサポートを報告します： 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;
});

フォークされたCodePen：https://codepen.io/techsock/pen/JEyqvM

更新

これはSafariのclip-pathの実装に問題があるようです。 clip-pathに関するWebkitの問題に関してMaster Bugが報告されています。 JSFiddleでは、Safariが複数のrect要素を含むSVGクリップパスを時々正しくレンダリングしますが、確実ではありません（下のスクリーンショットを参照）。非常に信頼できる回避策はないようです。また、この例をプルしたMDNページにも記載されています： https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#Browser_compatibility 。 MDNはSafariをNo Supportとしてリストします。

JSFiddle動作のスクリーンショット：

✗不正解Incorrect

✗不正解Incorrect

✓正しいCorrect

18
hopkins-matt

-webkit-接頭辞を追加するだけです：

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