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

Question

我正在尝试在我网站上的一些图像上塑造一个多边形。我的问题是多边形并不总是相同的宽度，它基于图像宽度。我创建了一个代码笔，你可以看到我的问题： http://codepen.io/doronsever/pen/bdyqYq。
这是生成我的 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 支持... 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>

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

How to define a clip path that doesn't scale with image

html

svg

clip-path