3

クリップ パスでインライン svg を使用して、コンテナーに面取りされたコーナー効果を実現しています。以下は私が現在使用しているコードです

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .clip-svg {
      width: 0;
      height: 0;
    }
    .clip-polygon {
      -webkit-clip-path: url("#clip-svg-demo");
      clip-path: url("#clip-svg-demo");
    }
  </style>
</head>

<body>
  <div class="clip-wrap">
    <img src="http://leisureleaguesfranchise.com/wp-content/uploads/2014/09/football2.jpg" alt="demo-clip-path" width="100px" height="100px" class="clip-polygon">
    <img src="http://leisureleaguesfranchise.com/wp-content/uploads/2014/09/football2.jpg" alt="demo-clip-path" width="400px" height="400px" class="clip-polygon">
  </div>

  <svg display="none;">
    <defs>
      <clipPath id="clip-svg-demo" clipPathUnits="objectBoundingBox">
        <polygon points="0,0 1,0 1,0.8 0.8,1 0,1" />
      </clipPath>
    </defs>
  </svg>

</body>

</html>

私が直面している問題は、クリッピングに使用される svg シェイプがレスポンシブであることです。コンテナーのサイズが大きくなるにつれて、SVG 形状のサイズが大きくなるため、右下隅の面取りカットの長さも長くなります。

私が望むのは、clip-path プロパティが適用されるコンテナの寸法に関係なく、カットの長さが同じままであることです。

私のコードでは、座標系に従って相対的にポリゴンのポイントを指定します。ポイントをピクセル単位で絶対的に指定できることはわかっていますが、それは固定サイズの形状になり、svg 形状の寸法よりも大きいまたは小さいコンテナーに完全に収まらない場合があります。

カット寸法は同じままですが、全体のポリゴンサイズは反応するように、ポリゴンポイントに相対寸法と絶対寸法の両方を同時に持つことができるかどうかを調べる必要がありました。

現時点の ここに画像の説明を入力

望ましい

編集以前にまったく同じ問題があるこの質問 を投稿しましたが、そこにある回答は私の要件を完全には満たしていません。この新しいスレッドを作成したのは、現在試している特定のソリューション (つまり、クリップ パス) についてより多くの助けを得たいからです。

4

1 に答える 1