問題タブ [clip-path]

背景のある要素 (画像または無地の色は実際には関係ありません):

SVG を使用してクリップパスを適用しようとしています。これを実現するために、次のように SVG インラインを同じ要素に入れています。

以下のコード スニペットを実行するか、JSFiddleを確認できます。元の SVG 画像 (黒) がインラインで配置され、下部に曲線があり、応答性が高いことがわかります。対照的に、赤い四角形は、同じイメージがclip-path.

ここで正確に何が間違っているのかを見つけることはできませんが、どちらかviewBoxまたは属性を誤解していると思います。preserveAspectRatioどんな助けでも大歓迎です。

CSS プロパティを使用しようとしてclip-pathいInvalid property valueますが、Chrome でエラーが発生します。

ここに小さなデモがあります：

注: これは、SVG (CSS ではなく) を使用してクリップ パスを適用する方法について具体的に尋ねているため、clip-path does not work with chromeに関するこの質問とは異なります。

Can I Use によると、 chrome で動作するはずです。

だから私は別の色のいくつかのテキストの手を振っているアニメーションを作ろうとしてきまし<clipPath>た-webkit-clip-path。.holderdiv には、同じテキストを持つ 2 つの要素が重なり合って含まれています。1 つは白、もう 1 つは灰色で、後者に適用clip-pathされます。

問題は、<path>座標をテキストのサイズに比例させる必要があることです。ここにフィドルのデモがあります。

• を設定しようとしましたがviewBox="0 0 100 100"、うまくいきません。

• 私も使用してみましclipPathUnits="objectBoundingBox"たが、この場合はうまくいかないようです。テキストがdisplay:inline.

これらが複雑すぎて分析できないように思われ、基本的な概念を理解し、自分のやり方で進んで実行したい場合は、この時点で提案をお待ちしています.

また、これを行うために JavaScript を回避しようとしていますが、もしそうしなければならない場合は、問題ありません :)

生のコードは次のとおりです。

HTML

この<animate>要素は、2 つのパスを交互に繰り返すだけで、「波」効果を生み出します。

CSS

これは私の CSS で、ほぼ完璧ではありません。自由に引き裂いてください。

前もって感謝します！

Chrome は現在、クリップパスでのポリゴンの使用をサポートしていますか?

インセットを機能させることはできますが (コメントアウトされたコードを参照)、多角形はできません。

ポリゴンを使ったクリップパスのデモ

cssのみを使用して、逆円錐形のレスポンシブ幅のdivを作成する方法を知っている人はいますか(添付のコードスニペットを参照)。また、この div には背景画像 (パターン) を繰り返す必要があります。

私はclipPathを使用しようとしました:

これは Safari と Chrome では問題なく動作しますが、Mozilla、Opera、または IE では動作しません。関連するすべてのブラウザで達成する方法はありますか?

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

クリップ パスを使用して、別の画像の背後にある画像を公開したいと考えています。

私はsvgサークル要素を使用しています。私が望む結果は、clipPath によって提供されるハード エッジではなく、ソフトなグラデーション エッジです。

これは可能ですか？マスクでできることは知っていますが、clipPath で動作するようには見えません。

これまでの私のコードは次のとおりです。