インライン SVG でレスポンシブなクリップパスを作成するにはどうすればよいですか?

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

SVG を使用して背景のある要素のクリップ パスを作成する場合、次のことが重要です。 viewBox と prepareAspectRatio がどのように機能するかを理解します。 viewBox 属性は SVG のコンテンツのサイズを定義し、preserveAspectRatio はコンテンツがどのように拡大縮小され、要素内に収まるかを決定します。

コード スニペットでは、クリップ パスをヘッダー要素に適用しています。 height of 100px:

<code class="css">#block-header {
  min-height: 100px;
  clip-path: url(#myClip);
}</code>

ただし、SVG の viewBox は「0 0 4000 1696」です。これは、クリップパスが 4000px の幅で適用されていることを意味します。これは、ヘッダー要素の実際の幅よりもはるかに大きい可能性があり、そのため、期待する効果が得られません。

レスポンシブなクリップパスを作成するには、SVG の viewBox を定義して、適用される要素の寸法。また、clipPathUnits 属性を使用して、パスが要素の境界ボックスを基準とした単位で定義されることを指定することもできます。

<code class="css">#block-header {
  min-height: 100px;
  clip-path: url(#myClip);
}

#myClip {
  clipPathUnits: objectBoundingBox;
}</code>

これらの変更により、SVG はヘッダーの寸法に合わせて拡大縮小されます。要素を追加すると、クリップパスが正しく適用されます。

以上がインライン SVG でレスポンシブなクリップパスを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。