インライン SVG を使用するときに、クリップパスの位置合わせを確実に応答的に行うにはどうすればよいですか?

インライン SVG によるレスポンシブ クリップ パス

背景のある要素にクリップ パスを適用する場合、SVG をインラインで埋め込むのが一般的です。ただし、以下の例に示すように、応答性や配置に関して問題が発生する可能性があります。

<code class="html"><header id="block-header">
  <svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none">
    <defs>
      <clipPath id="myClip">
        <path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z" />
      </clipPath>
    </defs>
  </svg>
</header></code>

問題

この例では、インライン SVG には明示的なサイズ (幅 4000 ピクセル) があり、ヘッダーの実際のサイズよりもはるかに大きい場合があります。その結果、クリップ パスが不釣り合いに大きくなり、予期しない位置合わせが発生します。

解決策: ClipPathUnits="objectBoundingBox"

応答性の高いクリップ パスを作成するには、clipPathUnits= "objectBoundingBox" 属性:

<code class="html"><svg width="0" height="0">
  <defs>
    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
      <path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z" />
    </clipPath>
  </defs>
</svg></code>

この属性を使用すると、SVG の viewBox と寸法は無関係になり、代わりにクリップ パスが適用される要素の境界ボックスに合わせてスケールされます。これにより、要素のサイズに関係なく、クリップパスの応答性と一貫性のある位置合わせが保証されます。

以上がインライン SVG を使用するときに、クリップパスの位置合わせを確実に応答的に行うにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。