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

この可能性はクリスも興奮しました?？赡苄预蠠o(wú)限に思えた。

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

path()関數(shù)內(nèi)のピクセル値を使用したMDNの例は、この問(wèn)題を強(qiáng)調(diào)しました。 path()関數(shù)はSVGを受け入れます<path></path>SVGのd屬性のように、座標(biāo)の座標(biāo)は単位のないピクセルです。 SVGのviewBoxとは異なり、これらのピクセルはCSS path()関數(shù)內(nèi)で固定されたままで、応答性のあるスケーリングを防ぎます。

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

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

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

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

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

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

ただし、呼吸効果を生み出すには、2次ベジエ曲線（Q）が必要であり、「腫れた」?fàn)顟B(tài)と「腫れた」?fàn)顟B(tài)の両方に対して、より複雑なパス定義が必要です。これは、長(zhǎng)く、繰り返しのCSSにつながります。

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

以上が殘念ながら、Clip-Path：Path（）はまだノーゴーですの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。