Question

我正在尝试在我网站上的某些图像上塑造多边形。我的问题是多边形并不总是相同的宽度，它基于图像宽度。我已经创建了一个可以看到我的问题的codepen： 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

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>

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

1 个答案: