如何在 SVG 中绘制带角的矩形

Question

我正在使用来自内联 SVG 的剪辑路径来屏蔽网站上具有不同纵横比的图像。遮罩应以固定角度 (-15deg) 隐藏右下角。

我无法实现右角始终保持一定角度，与蒙版图像的纵横比无关。

我当前的 SVG 如下所示：

<svg height="0" width="0" viewBox="0 0 1 1" preserveAspectRatio="none">
   <defs>
      <clipPath id="clipRight" clipPathUnits="objectBoundingBox">
         <rect x=0 y=0 width=1 height=0.5 /> 
         <rect x=0 y=0.5 width=1 height=0.5 transform="skewX(-15)" /> 
      </clipPath>
   </defs>
</svg>

并且 css 代码如下所示：

.img-clip-right {
   clip-path: url(#clipRight);
}

剪辑路径应如下所示

我有一种方法可以在不知道确切的图像尺寸和不使用 javascript 的情况下，以特定角度与 svg canvas 的底端画一条线？

Answer 1

你可以用数学计算出每个三角形的边长，用<path />代替<rect />来搭建一个五边形。

但在你的问题中，你没有指定白色三角形的大小，即使使用相同的一组角度（在你的情况下为 15-90-75），它也可以是任何大小，并且只是缩放。如果你有任何三角形边的特定尺寸，那将是一个明确的任务。

Answer 2

我不太明白为什么需要 SVG 和遮罩。

此代码段仅将剪辑路径应用于图像。

无论图像的大小或宽高比如何，它都会在同一区域的 15 度角处切角，因为问题中没有指定要切掉的量：

.clipped {
  --x: 100px;
  --tan15: 0.267949192;
  --y: calc(var(--tan15) * var(--x));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--y)), calc(100% - var(--x)) 100%, 0 100%);
}

<img class="clipped" src="https://picsum.photos/id/1015/200/300">
<img class="clipped" src="https://picsum.photos/id/1015/300/300">
<img class="clipped" src="https://picsum.photos/id/1015/300/200">

Answer 3

我喜欢将 SVG 用于剪辑路径的想法，但在这种情况下，也许更简单的解决方案就可以了。 polygon() 函数呢？以下是三个示例：

body {
display: flex;
}

div {
 margin: 2px;
}

div:nth-child(1) {
  background: CornflowerBlue;
  width: 200px;
  height: 200px;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
}

div:nth-child(2) {
  background: Peru;
  width: 200px;
  height: 200px;
  clip-path: polygon(0 0, 100% 0, 100% 160px, 160px 100%, 0 100%);
}

div:nth-child(3) {
  background: DarkSeaGreen;
  width: 200px;
  height: 300px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}

<div></div>
<div></div>
<div></div>

如何在 SVG 中绘制带角的矩形

How to draw a rectangle with an angled corner in SVG

css

svg

css-transforms

clip-path