有什么方法可以屏蔽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

设置clippath多边形时，不限于凸形。

如果指定

<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个多边形，你必须将它们全部链接到另一个。

第二，既然你想（或者至少看起来你想要）让多边形“切入”，你必须让它们'否定'。这是用它周围的巨大矩形包裹它（9999坐标）。好消息是，它是一个可以复制粘贴的代码。

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

Answer 2

浏览器中的剪辑目前还不成熟，因此您很可能会遇到使用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，但这不是必需的（它在这里用于设置画布等）。