0

我正在尝试在我网站上的一些图像上塑造一个多边形。我的问题是多边形并不总是相同的宽度并且它基于图像宽度。我创建了一个代码笔，您可以看到我的问题： 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 支持... 10x

4

1 回答 1

2

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

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

.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>

于 2015-08-17T15:18:12.933 回答