如何定义不随图像缩放的剪辑路径

Question

我正在尝试在我网站上的一些图像上塑造一个多边形。 我的问题是多边形并不总是相同的宽度并且它基于图像宽度。 我创建了一个代码笔，您可以看到我的问题： http://codepen.io/doronsever/pen/bdyqYq 。
这是生成我的 svg 剪辑路径的代码

<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 支持... 10 倍

Answer 1

很遗憾，您不能那样做，因为正如您所发现的，剪辑路径会随着应用它的图像而延伸。

您需要使用用clipPathUnits="userSpaceOnUse" 定义的clipPath。所以它的大小是恒定的，不随图像缩放。

.clip-svg-inline {
    -webkit-clip-path: url("#clip-polygon");
    clip-path: url("#clip-polygon");
    position: relative;                  /* Makes clip relative to image position instead of page */
    -webkit-transform: translateZ(0px);  /* Workaround for bug in Chrome */
}

<img src="http://www.paradisedogpark.com/dog3.jpeg" class="clip-svg-inline" width="300px" >
<img src="http://blogs.discovermagazine.com/gnxp/files/pekingese_burgess.png" class="clip-svg-inline">

<svg class="clip-svg">
  <defs>
    <clipPath id="clip-polygon" clipPathUnits="userSpaceOnUse" >
      <polygon points="2000 0, 2000 2000, 12 2000, 12 12, 0 0" />
    </clipPath>
  </defs>
</svg>