4

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

我可以用来-webkit-clip-path引用 SVGclipPath元素并剪辑该元素：

示例 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 鸟示例）。但是当我尝试在 jsfiddle 上重新创建它时，我意识到它适用于外部 SVG 文件，但不适用于内联 SVG。请参阅jsfiddle。

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

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

4

2 回答 2

3

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

如果您指定

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

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

更新的小提琴

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

编辑

是的，您可以剪辑剪辑。

看到这个更新的演示

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>

2点需要注意：

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

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

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

于 2013-07-24T18:05:35.990 回答
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');

ONLINE DEMO

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

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

我在演示中使用了easyCanvasJS，但它不需要它来工作（它在这里用于设置画布等）。

于 2013-07-24T01:22:42.033 回答