問題タブ [clip-path]

次のように、div 内のテキストの不透明度を下げるにはどうすればよいですか。

私のコードはこちらです。クロムで作業しているときに正常に機能する形状を作成しています。しかし、サファリではうまくいきません。

誰でも私を助けることができますか？

SVG クリップパスで要素をマスクしようとして、次の回避策に従いました: https://sarasoueidan.com/blog/css-svg-clipping/

すべてがChromeとFirefoxでうまく機能し、それが最良のソリューションのようです.

しかし、コンテンツをコンテナに入れて中央に配置すると、クロムでマスクに問題が発生します。Firefox はコンテンツを中央に配置していますが、クロムではマスクがブラウザの左側に貼り付いているように見えます。

これはフィドルです： https://jsfiddle.net/mideyahdatch/wk58Lq7h/2/

誰でもこの問題の答えを知っていますか? ご協力ありがとうございました！

ミデヤ

挿入円クリップ パスを作成して、クリップ パスが中央のみを表示するのではなく、中央の div に効果的に穴を開けられるようにすることはできますか?

次のようなものを作成するために、中央に切り取られた穴を除いて、すべての div を表示する必要があります。

クリップ パスなどを使用して、div の背後にあるもの (画像とコンテンツ) を保持できるようにしたいと思います。クリップ パスを使用してこれを明らかにします。したがって、div (jsfiddle の青い div) は、トランジションを使用して中央から消え、その背後にあるコンテンツを表示します。

https://jsfiddle.net/pm4yvbxn/

ブラウザに空の空白が表示されないようにclipPath要素を非表示にしたいのですが、画像のように他のsvgから使用できるようにしたいです。

幅 0 と高さ 0 を配置すると、IE でも画像が表示されません。

display:none を配置すると、画像はどのブラウザにも表示されません。

何か案は？

IE のどのバージョンもクールです... 11+ で十分です...

http://codepen.io/dapinitial/pen/86857208c985a895aeea87cfd40a0b2e

最初に Chrome を見て、それがどのように表示されることを意図しているかを確認してください。次に、IE の四角形に驚嘆してください。

4番目/下/最後の例で、CSSを介してスターをクリップさせようとしています。次の例のように、マークアップを変更しても構いません: Internet Explorer と clip-path

しかし...スタックオーバーフローの例に従おうとしてもうまくいきませんでした

clip-pathなしですべてのブラウザに互換性のあるcssプロパティを作成するにはどうすればよいSVGですか?