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 形状的尺寸增加，因此右下角的斜切也增加了长度。

我想要的是切割的长度保持不变，无论我的容器的尺寸如何，我的容器应用了剪辑路径属性。

在我的代码中，我根据坐标系相对指定多边形的点。我知道我们可以绝对地以像素为单位指定点，但这将使它成为一个固定大小的形状，它可能无法完美地适合大于或小于 svg 形状尺寸的容器。

我需要找出是否可以同时在多边形点中同时具有相对尺寸和绝对尺寸，以使切割尺寸保持不变，但整体多边形尺寸是响应式的。

当前的 在此处输入图像描述

期望的

编辑 我发布了这个问题，它之前有完全相同的问题，但那里的答案并不能完全满足我的要求。我创建了这个新线程，因为我想在我现在正在尝试的一个特定解决方案上获得更多帮助（即剪辑路径）

4

1 回答 1

0

如果您的页面背景是纯色（即不是图像或图案），您可以使用非 SVG 方式进行操作：

.clip-wrap {
  position: relative;
  overflow: hidden;
}

.small,
.small .clip-polygon {
  width: 100px;
  height: 100px;
}

.large,
.large .clip-polygon {
  width: 400px;
  height: 400px;
}

.clip-wrap::after {
  content: "";
  display: block;
  position: absolute;
  background-color: white;
  width: 30px;
  height: 30px;
  bottom: -15px;
  right: -15px;
  transform: rotateZ(45deg);
}
<div class="clip-wrap small">
  <img src="http://leisureleaguesfranchise.com/wp-content/uploads/2014/09/football2.jpg" alt="demo-clip-path" class="clip-polygon">
</div>

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

于 2015-09-08T12:05:03.603 回答