SVG ClipPath の寸法をコンテナの幅に合わせて動的に調整するにはどうすればよいですか?

SVG ClipPath の寸法をカスタマイズする方法

この記事では、SVG で定義された ClipPath 領域のサイズを動的に調整するためのソリューションを提供します。 SVG をマスクとして利用することで、その寸法と位置を簡単に操作できます。

問題の理解

提供されたコード スニペットでは、緑色のアイコンが付いた長方形のコンテナーが表示されます。背景には切り取られたSVG画像があります。目標は、色付きの緑色の領域の幅に合わせてクリッピング シェイプの寸法を大きくすることです。

解決策: SVG をマスクとして使用する

目的の結果を達成するにはこの効果を利用して、SVG をマスクとして切り取った画像に適用できます。 SVG の viewBox 属性を正しく設定することで、そのサイズと位置を制御できます。の更新版は次のとおりです。コード:

CSS:

.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,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' ) 
               center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' ) 
               center/contain no-repeat;
}

HTML:

<div>

説明:

• の CSS .cliped-img は、マスク プロパティを使用して SVG をマスクとして適用するようになりました。
• SVG の viewBox 属性は、クリッピング シェイプの寸法と一致するように「0 0 207 167」に設定されています。
• 異なる div で img コンテナの幅を指定することで、SVG マスクとクリップされた画像のサイズを簡単に調整できます。エリア。
​​

以上がSVG ClipPath の寸法をコンテナの幅に合わせて動的に調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。