含まれる要素の幅に合わせて SVG クリップ パスのサイズを変更するにはどうすればよいですか?

SVG の ClipPath 領域のサイズを変更するにはどうすればよいですか?

次のシナリオを考えてみましょう:

.img-container {
  width: 300px;
  height: 300px;
  background-color: lightgreen;  
  overflow: hidden;
}

.clipped-img {
  clip-path: url('#header-clip-svg');
}

<div class="img-container">

  <!--clipping SVG-->
  <svg height="0" width="0">
    <defs>
      <clipPath>

目的は、グリーンの幅に合わせてシェイプの寸法を切り取る

解決策

SVG をマスクとして使用すると、背景画像と同様に、そのサイズと配置を制御できます。 viewBox に適切な値を設定することで、目的の効果を実現できます。

.img-container {
  width: 300px;
  height: 300px;
  background-color: lightgreen; 
  margin:5px;
}

.clipped-img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  -webkit-mask:url('data:image/svg+xml;utf8, <path data here>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8, <path data here>') center/contain no-repeat;
}

<div class="img-container">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800">
</div>

<div class="img-container">

img コンテナの幅を変更することで、クリップ領域のサイズを簡単に調整できます。

以上が含まれる要素の幅に合わせて SVG クリップ パスのサイズを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。