有什么方法可以屏蔽 CSS 的 SVG 剪切路径？

Question

我有一个要剪辑的DIV 元素。

我可以使用 -webkit-clip-path 来引用 SVG clipPath 元素并剪切该元素：

示例 HTML

<svg width="0" height="0">
    <clipPath id="clipping">
        <polygon points="0 100, 300 30, 220 290" />
    </clipPath>
</svg>

<div id="tiles"></div>

示例 CSS

#tiles {
    background:red;
    width:300px;
    height:300px;
    -webkit-clip-path: url(#clipping);
}

请参阅JSFiddle。

但是我怎样才能从那个形状中剪出一个形状呢？例如，在红色三角形中放另一个三角形？如何屏蔽剪切路径？

几年前我看到一些资源说 Firefox 支持它，但我需要它才能在 Chrome 上工作，所以我什至没有尝试让它与 Firefox 一起工作。

我了解到 Chrome 支持 -webkit-mask-image，并且我已经看到了它工作的示例（请参阅 Twitter bird example）。但是当我尝试在 jsfiddle 上重新创建它时，我意识到它适用于外部 SVG 文件，但不适用于内联 SVG。请参阅jsfiddle。

剪切剪切路径不起作用，并且屏蔽剪切路径似乎也不起作用，因为clipPath 似乎不支持mask 属性。

任何人都有解决方案，还是我必须等待 Chrome 能够做到这一点？

Answer 1

剪辑目前在浏览器中还不成熟，因此您很可能会在使用 clip-path 和/或 SVG 时遇到问题。

如果我可以建议另一种方法，那么您可以使用 Canvas 元素作为引擎来绘制三角形、剪辑它们等等。这适用于大多数当前的浏览器，甚至 IE。

例如使用以下代码将导致：

该元素现在可以用作任何其他元素，并且如果您需要将其用作叠加层，它具有透明度。

过程很简单——一个将多边形点作为数组和颜色的通用函数：

function drawPolygon(points, color) {
    ctx.beginPath();
    ctx.moveTo(points[0], points[1]);
    for(var i = 2; i < polygon.length; i+=2)
        ctx.lineTo(points[i], points[i+1]);
    ctx.closePath();
    ctx.fillStyle = color;
    ctx.fill();
}

现在我们需要做的就是调用一次外部三角形，更改合成模式，以便我们在下一次绘制时“打孔”：

/// draw first red triangle
drawPolygon(polygon, '#f00');

/// composite mode to clear the first drawing with the next
ctx.globalCompositeOperation = 'destination-out';

/// a smaller triangle will make the hole (color not important here)
drawPolygon(polygon2, '#00f');

在线演示

您甚至可以将画布设置为另一个元素的背景图片：

divId.style.backgroundImage = canvas.toDataURL();

我在演示中使用easyCanvasJS，但这不是必需的（这里用于设置画布等）。

Answer 2

当您设置剪贴路径多边形时，您不仅限于凸形。

如果你指定

<polygon points="0 100, 220 290, 300 30, 220 100, 220 220, 180 100, 220 100, 300 30"></polygon>

这将绘制一个外部三角形（与您的相同），然后进入其中并切割另一个三角形。

updated fiddle

如果你这样做，你只需要记住在相反的方向上画内三角形而不是外三角形

编辑

是的，您可以剪辑剪辑。

看到这个updated demo

CSS 是

<svg width="0" height="0">
    <clipPath id="clip1">
       <polygon points="0 100, 220 290, 300 30"></polygon>
    </clipPath>
    <clipPath id="clip2" clip-path="url(#clip1)">
        <polygon points="0 0, 9999 0, 9999 9999, 0 9999, 0 0, 150 140, 180 190, 220 30, 150 140"></polygon>
    </clipPath>
</svg>

注意两点：

首先，它的语法不是很友好。据我所知，如果你想使用 5 个多边形，你必须将它们全部链接起来。

其次，既然你想要（或者至少看起来你想要）让多边形“直通”，你必须让它们 'negative' 。这是用一个巨大的矩形围绕它（9999坐标）来实现的。好消息是它是一个可以复制粘贴的代码。

无论如何，正如您在另一个答案中被警告过的那样，这项技术并不是真的很稳定。