2

我试图在网站上渲染图像，就好像它们是不同的几何形状一样。例如，通常为正方形的图像可以显示为六边形、圆形、五边形、八边形等。

这是一个响应式网站，这意味着原始图像将使用 样式设置max-width: 100%;，并且它们的大小将取决于它们的容器元素。

我的第一个想法是创建几个透明的 PNG“叠加图像”，每个所需的几何形状在透明区域“敲出”，然后用于z-index将蒙版叠加在原始图像上。

有没有更好的方法来使用画布或 SVG（甚至其他东西）来做到这一点，并且仍然允许图像和蒙版在浏览器窗口调整大小时均匀调整大小？我需要考虑哪些性能注意事项？

最终的生产代码将使用 jQuery，所以如果我需要它用于这些方法中的任何一种，它就会在那里。

4

1 回答 1

4

您可以将图像嵌入到 SVG 中并使用剪辑路径（Tinkerbin）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="100%" height="100%" viewBox="0 0 100 100">
  <clipPath id="clipCircle">
    <circle r="50" cx="50" cy="50"/>
  </clipPath>
  <clipPath id="clipTriangle">
    <polygon points="0 0 50 100 100 0"/>
  </clipPath>
  <image clip-path="url(#clipCircle)" preserveAspectRatio="none" width="100%" height="100%" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Catopsilia_pomona_3_by_kadavoor.jpg"/>
</svg>
<button onclick="document.getElementsByTagName('image')[0]
              .setAttribute('clip-path','url(#clipTriangle)')">
  change clip path
</button>

单击按钮将圆形遮罩更改为三角形遮罩。

于 2012-12-04T22:42:41.690 回答