svg 遮罩_SVG中剪辑和遮罩的综合指南

最新推荐文章于 2025-05-17 15:25:20 发布

翻译最新推荐文章于 2025-05-17 15:25:20 发布 · 1.5k 阅读

文章标签：

#java #python #css #js #javascript #ViewUI

本文详细介绍了SVG中的遮罩和剪切路径，包括它们的区别、clipPath和mask属性的使用，以及多种实际应用场景的演示。通过示例展示了如何使用SVG剪切和遮罩来实现各种创意效果。

svg 遮罩

剪切和遮罩是SVG的一项功能，该功能可以通过使用简单或复杂的形状来完全或部分隐藏对象的一部分。多年来，许多开发人员都采用了这些功能并将其推向各个方向。在本文中，我们将介绍一些高级方法以及演示，这些演示演示了剪辑和遮罩的效果。让我们开始吧！

什么是遮罩？

让我们首先回答这个问题：裁剪和遮罩之间有什么区别？我们将仔细研究每一个，以便更好地理解。请注意，虽然规范中概述的大多数功能现在都可以使用，但有些功能不能使用。始终在浏览器中仔细检查caniuse以及您自己的测试。

剪裁

剪切路径是一个对象，其中定义的形状内的所有内容均可见，而外部部分已“修剪”且未出现在画布上

在上面的示例图像中，我们的形状（Envato徽标）是我们将用作剪辑路径对象的对象。结果是从纯色背景中切出的，仅留下了一个坚硬的形状，即“剪切区域”的形式。

掩蔽

在这里，我们采用一个图形对象或形状，该对象或形状将通过遮罩绘画到背景上，从而完全或部分遮盖该对象的一部分。

将遮罩视为接受对象形状已经定义的可见区域的一种方式。在这种情况下，蒙版是我们希望从纯色背景中“提取”的对象。结果是与我们的蒙版相同的形状（即纯黑色形状）。

区别

仍对差异感到困惑？这两种类型的选项之间有一个非常细微的区别。将剪切路径视为“硬掩模”，其中剪切对象被移除的形状是没有任何透明或不透明像素穿过的形状。遮罩由形状或图像组成，其中每个像素具有不同程度的透明度和不透明度，可以以非常微妙的方式窥视或隐藏部分。

现在，让我们讨论一些元素和属性，这些元素和属性可以在SVG中进行剪切和遮罩。

clipPath

SVG clipPath接受许多属性和内容模型类型。接受的内容模型的类型包括诸如title和description以及其他类型的元数据标签。它还接受SMIL动画标签，例如<animate> ， <animateTransform> ，包括<text> ， <use> ， style和<script> SVG形状（ circle ， rect ， polygon ， path ）。您甚至可以在父clipPath包含多个clipPath定义。

这是一个使用元标记，SMIL和SVG形状的代码段：

<svg viewBox="0 0 100 100" xmlns="https://www.w3.org/2000/svg" version="1.1">
    <defs>
        <clipPath id="my-clip">
            <title>My Clip Path</title>
            <desc>an svg rectangle using a circle as the clipping target and animated with SMIL</desc>
            <rect x="0" y="0" width="200" height="600">
            <animate attributeType="XML"
                     attributeName="x"
                     from=“-200"
                     to=“400"
                     dur="5s"
                     repeatCount="indefinite"/>
            </rect>
        </clipPath>
    </defs>

    <circle clip-path="url(#my-clip)" width="200" height="200" cx="50" r="50" cy="50" fill="green" />
</svg>

也可以使用clip-path属性从CSS引用SVG中创建的clipPath ，如下所示：

.element {
    clip-path: url("#my-clip");
}

在这里，我使用url()函数引用了先前SVG片段中的片段，并传递了clipPath的id值。还可以选择将图像用作clipPath的目标：

<svg viewBox="0 0 200 300">
    <defs>
        <clipPath id="clip">
            <style>
            circle {
                fill: black;
            }
            </style>
            <circle cx="100" cy="100" r="100"/>
        </clipPath>
    </defs>

    <image height="100%" preserveAspectRatio="xMinYMin slice" width"100%" xlink:href="https://images.unsplash.com/photo-1472195870936-d88b0d4c1b41?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=f1abbd4d59a9b448813cb48769806ada" clip-path="url(#clip)" />
</svg>

此代码段中的图像使用SVG形状（圆形）作为其剪切对象。结果是一个圆形，里面有图像。很漂亮吧？您可能还会注意到clipPath包含了style标签。放置在clipPath （或mask ）内的任何<style>标记将战胜任何相关的属性和外部CSS。

clipPath属性

clipPath可以接受几种属性，并且肯定有太多属性无法列出。值得本文讨论的特定clipPath属性是clipPathUnits和clip-rule 。这是一个总结，描述了每个对象的功能以及如何选择适当的值。

clipPathUnits

此属性非常重要，因为它有助于定义clipPath内容的“坐标系”或“位置”。它接受两种类型的值，但只能传递一种。默认情况下，选择userSpaceOnUse ，并且您通常会使用。

userSpaceOnUse所述的内容clipPath表示在当前值用户坐标系时，在时间到位clipPath元件被引用时，或者换句话说，用户坐标系的元素引用clipPath经由clip-path属性。
objectBoundingBox坐标系的原点位于应用剪切路径的元素的边界框的左上角，并且该边界框的宽度和高度相同。用户坐标的大小等效于CSS px单位。

剪辑规则

clip-rule是另一个重要属性，但是正确把握它也相当复杂，并且属于clipPath “表示属性”。这个属性只适用于图形元素中包含一内clipPath元件。与clip-path属性结合使用时，它定义在填充图形的不同部分时要使用的剪切规则或算法。也可以通过使用fill-rule来实现。

clip-rule可以放置在clipPath ，从CSS文件中引用，也可以内置SVG样式。 fill-rule也可以放置在剪切对象的目标上，但是这两个选项将产生非常不同的结果。

nonzero ：此值通过在任意方向上从起点到无穷远绘制一条线并计算形状段在特定方向上与该线相交的位置，来定义点在路径的内部还是外部。当线段从左到右越过线时，计数会增加；当线段从右到左越过线时，计数会减少。如果计数为零，则该点在外面；否则，点在外面。如果非零，则在其内部。
evenodd ：此值通过在任意方向上绘制一条从该点到无穷远的线并计算该线交叉的形状段的数量来定义点在路径的内部还是外部。如果计数为奇数，则该点在内部；否则为0。即使是，重点也在外面。

面具

蒙版可以通过使用<mask>来完成图像，形状，边框和位置等一系列令人惊奇的事情。尽管它具有在SVG中定义的功能，但是也可以通过mask属性在CSS中引用它。遮罩可以接受clipPath或其他mask （Hello clipPath ）。从W3C规范可以接受并列出各种类型的内容模型。

这是一个使用SVG形状作为遮罩对象并针对内嵌SVG图像的代码示例。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <defs>
        <mask id="image-mask">
            <circle id="outer" cx="50" cy="50" r="50" fill="white"/>
            <circle id="inner" cx="50" cy="50" r="25"/>
        </mask>
    </defs>
    <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://images.unsplash.com/photo-1472195870936-d88b0d4c1b41?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=f1abbd4d59a9b448813cb48769806ada" mask="url(#image-mask)"></image>
</svg>

此代码示例生成一个甜甜圈，其中的内圈是透明的，而外缘使图像可以透视。本文结尾处有一个完整的演示，展示了结果。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <defs>
		<mask id="SVGMask" mask-type="luminance" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
			<style>
			#rect {
				mask-image: url(#SVGMask);
				mask-mode: luminance;
			}
			</style>
			<radialGradient id="radialFill">
				<stop stop-color="white" offset="0"/>
				<stop stop-color="black" offset="1"/>
			</radialGradient>
			<circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/>
		</mask>
	</defs>
	<rect id="rect" width="100" height="100" fill="green"/>
</svg>

这是另一个代码段，其中我使用CSS属性作为嵌套在mask内联样式来引用我们的蒙版对象，并使用亮度（从表面发出的光的强度）来控制照明模式。

遮罩图像

作者可以通过两种方式在SVG中定义遮罩。第一种是通过使用通常在SVG内的目标上定义的SVG属性mask="url(#id-value)" ，另一种是mask-image 。

就像mask一样， mask-image属性接受一个标识符，例如上面代码片段中使用的mask ID的值。如果在CSS中使用，则可以通过url函数mask-image: url(your-external-file.svg#the-mask-id-value)引用SVG文件本身。

遮罩模式

此属性确定将遮罩视为亮度遮罩还是Alpha遮罩。 alpha值控制蒙版允许的透明度， luminance值控制所发射光的强度。如果决定将其定义为SVG遮罩上的属性，则可以直接在SVG mask元素上使用属性mask-type ，也可以使用CSS内定义的mask-mode 。

maskUnits

<mask maskUnits="[objectBoundingBox | userSpaceOnUse]">

就像clipPathUnits一样，mask具有非常相似的属性。此掩蔽属性有助于为x ， y ， width和height等属性定义坐标系。如果没有值，则默认使用objectBoundingBox的值。

userSpaceOnUse ：引用<mask>的元素的用户坐标系
objectBoundingBox ：可以将边界框视为与将<mask>的内容绑定到“ 0 0 1 1 ”视图框相同。

maskContentUnits

<mask maskContentUnits="[objectBoundingBox | userSpaceOnUse]">

定义蒙版内容的坐标系。就像maskUnits一样，它也接受userSpaceOnUse或objectBoundingBox作为值。如果未传递任何值，则默认使用userSpaceOnUse的值。

userSpaceOnUse ：引用<mask>的元素的用户坐标系
objectBoundingBox ：可以将边界框视为与<mask>的内容绑定到viewbox="0 0 1 1" 。

用例

您可以通过一些非常聪明的方法在工作中实现遮罩和剪切路径。

演示1

下面是使用我们给用户感知装载的感觉内容（命中重新运行在右下角看到效果）的松紧式的加载上下文的例子。

获取API数据后，我们就可以开始推出内容了。这结合了CSS渐变，CSS动画和SVG clipPath 。向最初的创作者Yacine发起的道具引发了我上面更新的演示。我应该指出，为了朝这个方向发展，您需要使用诸如Sketch之类的SVG编辑器重新创建最终产品的占位符外观，以创建初始结构。

演示2

这是另一种巧妙的艺术方法，它是从Noel Delgado的笔中获取的，它使用SVG剪辑显示了悬停事件：

虽然使用JavaScript来检测鼠标位置，但效果本身实际上是SVG clipPath 。投资组合部分展示工作的效果非常好，但是请确保为没有鼠标的场景创建备用。

演示3

有时简单与复杂同样有效。我是排版的忠实拥护者，在本示例中，史蒂文·辛纳屈（ Steven Sinatra ）使用了SVG蒙版来帮助隔离文本并将其设置为动画（再次，您需要按一下rerun ）。一种有趣的方法，可用于那些著名的英雄区域。

演示4

我之所以选择这支笔，是因为它是在诸如评分或喜欢帖子/项目之类的情况下填充图标的绝佳用例，并且全部使用SVG蒙版完成。

演示5

最初由Dudley Storey创建，Shaw的这把前叉使用SVG面罩隔离悬停时的每个滑板手。用鼠标悬停在每只鼠标上，以查看效果发生了。太酷了吧？

想要更多？

只是为了有趣的东西呢？由于蔡斯（Chase），电影海报才变得更酷。 SVG蒙版和滤镜的一个非常有趣且富有创造力的示例！

我还创建了一个公共演示，其中包含更多示例，这些示例演示了如何使用场景组合来设置不同类型的剪辑和遮罩，以及使用SMIL的其他示例。

离别的想法

你有它; SVG中的裁剪和遮罩的剖析和分析。您今天在工作中使用这些类型的方法吗？有一个非常好的用例演示可以分享，或者只是对一般事物有意见？在下面发表您的评论，并祝您编程愉快！

资源资源

翻译自: https://webdesign.tutsplus.com/tutorials/a-comprehensive-guide-to-clipping-and-masking-in-svg--cms-30380

svg 遮罩