Html 如何定义不包含'；带图像的t标度

我试图在我的网站上的一些图片上塑造一个多边形。 我的问题是，多边形的宽度并不总是相同的，它的宽度取决于图像的宽度。 我创建了一个代码笔，您可以看到我的问题： .
下面是生成svg clipath的代码

<svg class="clip-svg" width="0" height="0">
  <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox" >
      <polygon points=".04,1, .04 .04, 0 0, 1 0, 1 1" />
    </clipPath>
  </defs>
</svg>

如您所见，左上角的小三角形在两幅图像上的大小不同。 我如何控制它，使其始终处于相同的大小，而不考虑图像宽度？ 我不能使用css剪辑路径，因为我需要FF支持。。。

---

10x

不幸的是，您不能这样做，因为正如您所发现的，剪辑路径会随着它应用到的图像而拉伸

您需要使用由

clipPathUnits=“userSpaceOnUse”

定义的clipPath。所以它的大小是恒定的，不随图像缩放

.clip svg inline{
-webkit剪辑路径：url（“剪辑多边形”）；
剪辑路径：url（“剪辑多边形”）；
位置：相对；/*使剪辑相对于图像位置而不是页面*/
-webkit转换：translateZ（0px）；/*解决Chrome中的bug*/
}

对不同大小的图像使用不同的SVG。理由：整个SVG将被缩放，您无法缩放某些点，而其他点则不能。10倍！，正是我想要的needed@Paul勒保，我也面临同样的问题。我不想让我的SVG拉伸，多亏了你的回答，我现在已经可以工作了！但是，您知道如何使SVG以图像为中心吗？（我正试图在图片顶部剪出一个三角形）@Arjenovic提出一个问题，解释你想做什么。@PaulLeBeau好的，完成了！：）以下是链接：