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

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

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

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

有没有更好的方法来使用canvas或SVG（甚至其他东西），并仍然允许图像和蒙版在浏览器窗口resize时均匀resize？ 我需要考虑哪些性能考虑因素？

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

Answer 1

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

   change clip path  

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