Question

我在剪辑路径中使用内联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形状尺寸的容器。

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

当前

所需

修改我发布了this问题，这个问题之前有完全相同的问题，但那里的答案并不完全符合我的要求。我创建了这个新线程，因为我想获得更多关于我正在尝试的特定解决方案的帮助（即剪辑路径）

Answer 1

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

0.93999999

.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);
}

在内联svg多边形

1 个答案: