問題タブ [clip-path]

バナーを作ってみました。かなりうまく機能しますが、Firefox では機能しません。Firefox で同じ効果を達成し、テキストを内部に保持するにはどうすればよいですか? たとえば、SVG では?

例：

mozilla で svg clip-path を実行しようとしていますが、うまくいきません。

それはクロムで完全に機能します。誰でも mozilla やその他のブラウザーで私を助けることができますか?

画像のマスクとして SVG を使用しており、サイズを変更しようとしています。幅と高さを (100 まで) 表示しようとしましたが、それでもスケーリングしません。ちょうど同じサイズのままです。

コードペンデモ

これは SVG コードです。

SVG のクリップ パスでクリップされた画像があります。

http://codepen.io/mjjwatson/pen/GopNaj

このペンを装備して、4 秒ごとに画像のズーム クラスを切り替えます。幅に遷移があるため、クリップパスが同じままで、画像の幅が 42% から 100% にアニメーション化され、画像のズーム効果が作成されると予想されます。ただし、Chrome では更新に問題があるように見えます。ブラウザのサイズを変更すると、幅が変化するのがわかりますが、アニメーションは表示されません。

画像の変換スケーリングも試しました：

これにより、画像がスケーリングされ、必要に応じてアニメーション化されますが、クリップパスもスケーリングされます。

クリップパスを所定の位置に保ちながら、この画像ズーム効果を実現する別の解決策はありますか、それとも再考する必要がありますか?

私は現在、クリップ パスに画像スライダーがある 1 ページのサイトに取り組んでいます。例: http://grafomantestsite3.be/ .

ここに小さなコードがあります：

スライダーは Concrete5 のブロックを使用して生成されます。そのため、画像スライダーの HTML コードはスクリプトを使用して生成されます。

これは Chrome では機能するようですが、Firefox、Opera、Internet Explorer では機能しません...

これを修正する簡単な方法はありますか？SVG メソッドについては知っていますが、HTML 内で背景画像を設定する必要があるため、うまくいかないようです。そして、ここではこれは不可能です。

どんな助けでも大歓迎です。

前もって感謝します。

編集：

だから私は SVG メソッドを試し、これを HTML の本文に追加しました:

ただし、これは機能していないようです。私は何を間違っていますか？

jQuery 画像スライダーをマスクしようとしています。スライダーには次の構造が含まれます。

この構造では、clip-path プロパティを flexslider div に適用したいと思います。Chrome では、プロパティに -webkit- プレフィックスを追加することで問題なく動作しますが、Firefox と IE は通常の clip-path プロパティをサポートしていないようです。

クロス ブラウザ ソリューションをオンラインで探していますが、見つかりません。Firefox は clip-path プロパティとして url 値のみをサポートしているのを見ましたが、IE はそれをまったくサポートしていません。

これがアイデアです：

赤い部分が画像スライダー。

誰かがこれに対するクロスブラウザソリューションを知っていますか?

ありがとう！

画像の表示部分にホバーを適用する方法はありますか?

transfomが行われている間、はclip-path無視されているようです:

これがなぜなのか、これを防ぐ方法を知っている人はいますか?