残念ながら、Clip-Path：Path（）はまだノーゴーです

当初、Firefoxのclip-path: path()の見通しは非常にエキサイティングでした。単一のHTML要素と最小限のCSSを使用して、下に示す呼吸ボックスのように、動的な形状を簡単に作成することを想像してください。SVGや長いポリゴンポイントリストは必要ありません。

この可能性はクリスも興奮しました。可能性は無限に思えた。

しかし、私の熱意はすぐに綿密な検査で衰退しました。 clip-path: path()はFirefoxで機能します（特定のフラグが有効になっているバージョン63-70、および71なし）、大きな制限が明らかになりました。パス座標はピクセルベースです。これは、彼らが反応的にスケーリングしないことを意味します。

path()関数内のピクセル値を使用したMDNの例は、この問題を強調しました。 path()関数はSVGを受け入れます<path></path>SVGのd属性のように、座標の座標は単位のないピクセルです。 SVGのviewBoxとは異なり、これらのピクセルはCSS path()関数内で固定されたままで、応答性のあるスケーリングを防ぎます。

これにより、関数はレスポンシブデザインに対してほとんど非実用的です。 path()でクリップされた応答性要素は、サイズに関係なく固定されたクリップ領域を維持します。たとえば、ビューポートを使用した正方形のスケーリングは、静的にサイズのクリップされたハート形状になります。

この制限はclip-path: path()の有用性を厳しく制限します。 SVGまたはPolygon（）近似は、ほとんどのシナリオで優れた代替品のままです。 clip-path: path()実行可能なオプションにするためには、改善が重要です。

Amelia Bellamy-Roydsは2つの解決策を提案しました。

1. パスデータ内のcalc()値/単位をサポートします。これにより、SVGパス構文が拡張されます。
2. clip-path宣言内にviewBoxを紹介し、スケーリングを可能にします。

私は最初の選択肢を好みます。 2つ目は、個別のSVGの必要性を排除しながら、SVGを直接使用することよりも限定的な利点を提供します。ただし、最初のオプションは、 clip-path: path()を大幅に強化し、特定のアプリケーションで便利なSVGを上回る可能性があります。

呼吸ボックスの例を考えてみましょう。 SVG実装では、シェイプを中央に配置するために慎重なviewBox構成が必要です。 SCSSコードは、 viewBoxおよびPATHコマンド（M、V、H）を使用して、必要なパス文字列を生成します。

ただし、呼吸効果を生み出すには、2次ベジエ曲線（Q）が必要であり、「腫れた」状態と「腫れた」状態の両方に対して、より複雑なパス定義が必要です。これは、長く、繰り返しのCSSにつながります。

理想的には、 calc()サポートとカスタムプロパティを使用してclip-path: path()使用すると、形状を動的に制御できます。 --sgnのようなカスタムプロパティは、 calc()内の符号を制御でき、単一のパス定義を持つ状態間のアニメーションを有効にします。これにより、コードが大幅に簡素化され、レスポンシブスケーリングが確保されます。ただし、現在、 clip-path: path()その可能性に達していません。

以上が残念ながら、Clip-Path：Path（）はまだノーゴーですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。