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

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

インライン SVG を使用してレスポンシブ クリップ パスを作成する際に問題が発生しています。応答性の高い SVG があるにもかかわらず、適用されたクリップ パスが正しくスケーリングされません。

問題は、SVG でのクリップ パスの参照方法にある可能性があります。インライン SVG 内でクリップ パスを定義する場合、クリップ パスとして SVG 自体を参照するのは正しい方法ではありません。

解決策は、SVG の 内にクリップ パス定義を作成することです。セクションを開き、clip-path 属性を使用して、クリップ パスを適用する要素からその定義を参照します。

例を次に示します。

<code class="html"><svg width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <defs>
    <clipPath id="myClip">
      <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 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>

この例では、

• 最初の SVG のpreserveAspectRatio 属性は、サイズ変更時に SVG のアスペクト比が歪むのを防ぐために none に設定されます。
• ヘッダー要素内の SVG は、ヘッダー要素内の SVG のサイズが 0 で、ヘッダー要素のサイズがゼロになります。ページ上の要素。
• クリップ パス定義の ClipPathUnits 属性は objectBoundingBox に設定されます。これは、クリップ パスの座標系が適用される要素に基づくことを意味します。

これにより、クリップパスがコンテナ要素に応じて確実にスケーリングされます。

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