インライン SVG クリップパスをレスポンシブにする方法

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

問題:

定義されたクリップ パスインライン SVG を使用すると、親要素に必要な曲率が適用されません。

Anaization:

提供されたコードでは、clipPath 参照が、背景。ただし、クリップ パスは意図したとおりに表示されません。

Reason:

url(#myClip) によって参照されるクリップ パスは、インラインSVG。親要素に適用すると、クリップパスの寸法は要素のサイズに合わせて拡大縮小されず、曲率が表示されなくなります。

解決策:

To親要素に合わせてスケールする応答性の高いクリップパスを作成するには、clipPathUnits 属性を、clipPath 定義の「objectBoundingBox」に設定する必要があります。これにより、クリップパスの寸法が親要素の境界ボックスを基準にして応答性が高くなります。

更新されたコード:

<code class="html"><header id="block-header">
    <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>
</header></code>

設定によるClipPathUnits を「objectBoundingBox」に設定すると、クリップパスは親要素のサイズに合わせて自動的に拡大縮小され、曲率が確実に表示され、要素サイズの変化に対応します。

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