Question

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

这是一个自适应网站，意味着原始图片将使用max-width: 100%;设置样式，并且根据其容器元素进行调整。

我首先想到的是创建几个透明的PNG“叠加图像”，其中每个所需的几何形状在“透明区域”中被“敲出”。然后使用z-index覆盖原始图像顶部的蒙版。

使用canvas或SVG（甚至其他东西）是否有更好的方法来执行此操作，并且仍然允许在浏览器窗口调整大小时均匀调整图像和蒙版的大小？我需要考虑哪些性能因素？

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

Answer 1

您可以将图像嵌入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>

单击按钮将圆形蒙版更改为三角形。

响应式设计中使用Canvas或SVG进行图像遮罩

1 个答案: