如何使用CSS和SVG剪切和遮罩技术

Posted 2023-04-12

SVGs 能够很好的在 web 上工作, 剪切和遮罩允许你使用有趣的方式去展示或隐藏 web 图像， 使用这些技术也能让的设计变得更加灵活因为你不需要去修改或者创建新的图像——这些都可以用代码来实现。通过结合使用 CSS 和遮罩技术，你将会拥有更多的可能性去使用网络图像。
需要明确的是，遮罩和剪切是通过 CSS 来处理图像的两种不同的方法，让我们从剪切开始吧！
剪切基础
如果你曾经使用过 Photoshop , 你大概已经很熟悉剪切遮罩了。 他们有一些共同点，剪切通过放置矢量图形来使用,比如圆和三角形, 在图像和元素的上面矢量图形外面的任何部分都会显示，所有矢量图形边界的外面都将被隐藏。
举个例子，如果一个三角形的剪切遮罩覆盖上树林图像上的话, 你可以看到三角形里面的森林图像。图形的边界被称做剪切路径, 不要和已经废弃掉的 clip 属性混淆，你可以使用 clip-path 去创建一个剪切路径。
遮罩基础
在网页上，遮罩是使用 PNG 图片、CSS 渐变、或一个 SVG 元素来隐藏图片或其它元素的部分。我们将集中注意力在 SVG 图像上，不过请注意遮罩可以使用其他类型的图片或者样式的。
遮罩属性和遮罩元素
仅仅是为了帮助理解, 请记住被遮罩的元素是“原始”（还没有应用遮罩的）图片， 你可能不想看到全部的图片,所以使用 CSS mask 属性来完成隐藏部分图片的工作。 mask 是 CSS 一组独立属性的简写 , 我们将接下来会介绍它。SVG 元素被用来给 SVG 内部的图像添加遮罩效果。在接下来的示例中, 遮罩是添加了渐变效果的圆形。
在 SVG 图像上应用 SVG 遮罩元素
为了使用 SVG mask 得到一种感觉，我们将在 SVG 图像上使用遮罩。
这给人的第一印象可能会比较复杂, 但是它可以很好遮罩下面的图像。我们有一张真实的图片作为背景，那么 SVG 在哪里起作用呢？和剪切不同, 这张背景图片技术上来说是在 SVG 元素内部的。我们将使用 CSS 来给图片应用遮罩，属性将来自于 SVG 遮罩元素，在我们的 CSS 中指定一个 mask-element id。 参考技术A 野旷天低树，

动画 CC 画布和遮罩

【中文标题】动画 CC 画布和遮罩

【英文标题】：Animate CC Canvas And Masking

【发布时间】：2018-04-15 05:04:09

【问题描述】：

我想知道如何在将充当蒙版的影片剪辑中使用动画形状？

在我的 Animate CC 画布文件中，我有一个实例 (stripeMask)，它应该掩盖下面称为 mapAnim 的实例。

stripeMask 包含动画形状。

因此，当调用函数 maskIn 时，播放头应该移动到 stripeMask 剪辑内的第一帧（第 0 帧之后的帧）并像这样为蒙版设置动画：

 function maskIn()
 //maskAnimation to reveal image below
 stripeMask.gotoAndPlay(1);
 

我喜欢 AnimateCC，它工作得很好，但是需要创建更复杂的动画蒙版，除非我在这里遗漏了一些东西，否则实现起来并不容易。

谢谢！

【参考方案1】：

目前您只能将 Shape 用作 mask，而不是 Container 或 MovieClip。

如果你想做更复杂的事情，你可以使用AlphaMaskFilter之类的东西，但它必须被缓存，然后在每次掩码或内容更新时更新：

something.filters = [new createjs.AlphaMaskFilter(stripeMask)];
something cache(0,0,w,h);
// On Change
something.updateCache(); // Re-caches

AlphaMaskFilter 的源必须是图像，因此您可以指向位图图像，或者您还缓存的蒙版剪辑的cacheCanvas。请注意，如果掩码更改，则缓存也必须更新。

诚然，这不是一个很好的解决方案，我们正在研究其他选项。