css 中使用svg_使用CSS和SVG在浏览器中屏蔽

css 中使用svg

Masking is a technique that lets you display selected portions of an element or an image on the screen while hiding the rest. Web developers can use this technique in the browser via the mask property and the SVG mask element. These features allow you to display masking effects on images and other elements in the browser without using any kind of image editing software.

遮罩是一种使您可以在屏幕上显示元素或图像的选定部分而隐藏其余部分的技术。 Web开发人员可以通过mask属性和SVG mask元素在浏览器中使用此技术。 这些功能使您可以在浏览器中的图像和其他元素上显示掩盖效果，而无需使用任何类型的图像编辑软件。

In this article, I’m going to show CSS and SVG masking capabilities in action, also making sure to include some info about current browser support issues.

在本文中，我将展示实际CSS和SVG屏蔽功能，并确保包含有关当前浏览器支持问题的一些信息。

At the time of writing, most code samples work only in WebKit browsers while SVG-based masks seem to enjoy wider browser support. Therefore, if you’d like to try out the examples, I recommend you use a WebKit browser like Chrome.

在撰写本文时，大多数代码示例仅在WebKit浏览器中起作用，而基于SVG的掩码似乎更受浏览器支持。 因此，如果您想尝试这些示例，建议您使用Chrome之类的WebKit浏览器。

屏蔽网络 (Masking on the Web)

You can achieve masking effects on the web using clipping or masking.

您可以使用剪辑或遮罩在Web上实现遮罩效果。

Clipping involves laying a closed vector shape, like a circle or a polygon, on top of an image or an element. Any parts of the image behind the shape will be visible, while any parts outside the boundaries of the shape will be hidden. The shape’s boundary is called the clip path, and you create it using the clip-path property.

剪切涉及在图像或元素的顶部放置闭合的矢量形状，例如圆形或多边形。 形状后面的图像的任何部分都是可见的，而形状边界之外的任何部分都将被隐藏。 形状的边界称为剪切路径，您可以使用clip-path属性创建它。

Masking is done using a PNG image, CSS gradient, or an SVG element to hide some parts of an image or other element on the page. You can accomplish this using the CSS mask property.

遮罩是使用PNG图片，CSS渐变或SVG元素完成的，以隐藏图像的某些部分或页面上的其他元素。 您可以使用CSS mask属性来完成此操作。

In this article, I will focus exclusively on masking with the CSS mask property and the SVG element.

在本文中，我将专注于使用CSS mask属性和SVG 元素进行 。

CSS mask属性 (The CSS mask Property)

mask is the CSS shorthand property for a whole bunch of individual properties. Let’s take a closer look at some of them in more detail.

mask是一整套单独属性CSS缩写属性。 让我们更详细地研究其中的一些。

mask-image属性 (The mask-image Property)

You can use the mask-image property to set the mask layer image of an element.

您可以使用mask-image属性设置元素的遮罩层图像 。

The value none is not the same as setting no value at all. On the contrary — it still counts as a transparent black image layer.

none的值与none没有设置的值不同。 相反，它仍然算作透明的黑色图像层。

You can set mask-image to a URL value. This can be the path to a PNG image file, an SVG file, or a reference to an SVG element. You can set more than one mask image layer by adding a corresponding number of URL values separated by a comma.

您可以将mask-image设置为URL值。 这可以是PNG图像文件，SVG文件或SVG 元素的引用的路径。 您可以通过添加相应数量的URL值(以逗号分隔)来设置一个以上的蒙版图像层。

Here are a few examples:

这里有一些例子：

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

This is how you reference an SVG element with an id of mask1:

这是引用id为mask1的SVG 元素的方式：

.masked-element {
  mask-image: url(#mask1);
}

A gradient image is also a suitable value for the mask-image property:

渐变图像也是mask-image属性的合适值：

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

mask-mode属性 (The mask-mode Property)

With mask-mode you can set the mask layer image to be either an alpha mask or a luminance mask.

使用mask-mode您可以将遮罩层图像设置为Alpha遮罩或亮度遮罩。

An alpha mask is an image with an alpha channel. In more detail, the alpha channel is the transparency information contained in each pixel’s data. Masking operations with the mask-mode property set to alpha will use the image’s alpha values as the mask values.

Alpha蒙版是具有Alpha通道的图像。 更详细地，阿尔法通道是包含在每个像素的数据中的透明度信息。 mask-mode属性设置为alpha的mask-mode操作将使用图像的alpha值作为蒙版值。

A handy example of an alpha channel is a PNG image with black and transparent areas. The masked element will show through the black portions of the mask image, which have an alpha value of one. Everything else beneath the transparent portions, which have an alpha value of zero, will be hidden.

Alpha通道的一个方便示例是带有黑色和透明区域的PNG图像。 被遮罩的元素将通过遮罩图像的黑色部分显示出来，其alpha值为1。 alpha值为零的透明部分下面的所有其他内容都将被隐藏。

I’m going to use this PNG image as my alpha mask:

我将使用此PNG图像作为Alpha蒙版：

and perform a masking operation on the JPG image below:

并对下面的JPG图像执行遮罩操作：

This is where the magic happens:

这就是魔术发生的地方：

.masked-element {
  mask-image: url(alpha-mask.png);
  mask-mode: alpha;
}

and here’s what the result looks like in the browser:

这是浏览器中的结果：

A luminance mask uses an image’s luminance values as mask values. A PNG image like the one above — but in white — is a good example of a luminance mask:

亮度蒙版使用图像的亮度值作为蒙版值。 上面的PNG图像(但以白色表示)是亮度蒙版的一个很好的例子：

The areas of the element you want to mask, which are covered by the mask’s white pixels, will show through. The portions of the masked element covered by the mask’s transparent pixels will be hidden.

要遮罩的元素区域(由遮罩的白色像素覆盖)将显示出来。 被遮罩的透明像素覆盖的被遮罩元素的部分将被隐藏。

Setting the mask-mode property to luminance and using the image above as my mask, will display the same result as before.

将mask-mode属性设置为luminance并将上面的图像用作我的蒙版，将显示与以前相同的结果。

Here’s the code:

这是代码：

.masked-element {
  mask-image: url(luminance-mask.png);
  mask-mode: luminance;
}

mask-repeat属性 (The mask-repeat Property)

mask-repeat works pretty much like the background-repeat property. It controls the tiling of mask layer images after you’ve set their size and position.

mask-repeat工作原理与background-repeat属性非常相似。 设置蒙版图层图像的大小和位置后，它可以控制它们的平铺。

Possible values are:

可能的值为：

• no-repeat: the mask layer image is not repeated across the available space.

  no-repeat ：不会在可用空间上重复遮罩层图像。

• repeat-x: the mask layer image is repeated along the X coordinate.

  repeat-x ：沿X坐标重复遮罩层图像。

• repeat-y: the mask layer image is repeated down the Y coordinate.

  repeat-y ：在Y坐标下重复遮罩层图像。

• space: the mask layer image is repeated and spaced out throughout the available area.

  space ：重复遮罩层图像，并在整个可用区域中将其间隔开。

• round: the mask layer image is repeated a whole number of times across the available area. If a whole number doesn’t fit in the available space, the image is scaled until it does.

  round ：在可用区域中将蒙版图层图像重复执行多次。 如果整数不能容纳在可用空间中，则将缩放图像直到它适应为止。

For instance, this is the image I intend to use as my mask:

例如，这是我打算用作蒙版的图像：

The code snippet below sets the mask-repeat property to a value of space:

下面的代码段将mask-repeat属性设置为space值：

.masked-element {
  mask-image: url(imgs/trapeze.png);
  mask-repeat: space;
}

resulting in the following masking effect:

导致以下屏蔽效果：

mask-position属性 (The mask-position Property)

You can position a mask layer image using the mask-position property. You can set this property to the same values you would use for the more familiar CSS background-image property. Its initial value is center.

您可以使用mask-position属性放置遮罩层图像。 您可以将此属性设置为与更熟悉CSS background-image属性相同的值。 其初始值为center 。

For instance, if you want to place the mask image layer on the top left corner of the viewport, set the mask-position property to a value of 0 0:

例如，如果要将蒙版图像层放置在视口的左上角，请将mask-position属性设置为0 0的值：

.masked-element {
  mask-position: 0 0;
}

This is what the code above looks like in the browser:

这是上面的代码在浏览器中的样子：

Changing the value of the mask-position property above to 100% 100%, displays the mask layer image on the bottom right of the viewport:

将上面的mask-position属性的值更改为100％100％ ，将在视口的右下角显示遮罩层图像：

mask-size属性 (The mask-size Property)

You can quickly set the size of your mask layer image using the mask-size property, which accepts the same values as the more familiar CSS background-size property.

您可以使用mask-size属性快速设置遮罩层图像mask-size ，该属性接受与更熟悉CSS background-size属性相同的值。

For example, setting mask-size to 50% displays the mask layer image at 50% of its full width:

例如，将mask-size设置为50％将以其全宽的50%显示mask图层图像：

Setting mask-size to contain will scale the mask layer image to the largest size so that both its width and height can fit inside the mask positioning area:

将mask-size设置为contain将把mask图层图像缩放到最大尺寸，以使其宽度和高度都可以适合mask定位区域：

You can see these demos live in action on CodePen below:

您可以在下面的CodePen上看到这些演示的实际操作 ：

See the Pen CSS Mask Examples by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen CSS蒙版示例 。

合成遮罩层 (Compositing Mask Layers)

As explained above, you can use more than one mask layer on the same element by separating each value of the mask-image property with a comma. The layers get stacked one on top of the others with the last layer displaying first on the screen.

如上所述，通过用逗号分隔mask-image属性的每个值，可以在同一元素上使用多个遮罩层。 这些层堆叠在一起，最后一层首先显示在屏幕上。

For instance:

例如：

.masked-element {
  mask-image: url(mask1.png), url(mask2.png);
}

In the snippet above, mask2.png is layered on top of mask1.png.

在上面的代码段中， mask2.png位于mask1.png的顶部。

The mask-composite property lets you combine different mask layers according to the value of the following keywords:

使用mask-composite属性，您可以根据以下关键字的值组合不同的蒙版层：

• add: mask2.png is painted on top of mask1.png

  add ： mask2.png绘制在mask1.png顶部

• subtract: displays portions of mask2.png that don’t overlap mask1.png. Browsers don’t support the standard keyword yet, therefore, at least for the time being, you’ll need to use the corresponding compositing operator keyword source-out

  subtract ：显示mask2.png的不与mask1.png重叠的部分 。 浏览器尚不支持标准关键字，因此，至少暂时而言，您需要使用相应的合成运算符关键字source-out

• intersect: displays portions of mask2.png that overlap mask1.png. However, WebKit browsers, which are the only kind of browsers supporting CSS masks, seem to display nothing on the screen, even when the non-standard composite source-in keyword is used.

  intersect ：显示mask2.png与mask1.png重叠的部分 。 但是，WebKit浏览器是唯一支持CSS掩码的浏览器，即使使用了非​​标准的复合source-in关键字，也似乎在屏幕上什么也不显示。

• exclude: displays portions of mask1.png and mask2.png that don’t overlap. Once again, because the standard keyword has no support yet, you’re much better off using the compositing operator XOR.

  exclude ：显示mask1.png和mask2.png不重叠的部分。 再一次，因为标准关键字尚不支持，所以最好使用合成运算符XOR 。

You can check out the live demos in the CodePen demo below too:

您也可以在下面的CodePen演示中查看实时演示 ：

See the Pen CSS Mask Compositing by SitePoint (@SitePoint) on CodePen.

请参见在CodePen上由SitePoint( @SitePoint ) 合成 Pen CSS蒙 版 。

mask速记属性 (The mask Shorthand Property)

You can set all the properties that control CSS masking operations in one go using mask.

您可以使用mask一次设置所有控制CSS遮罩操作的属性。

Here’s the full mask shorthand:

这是完整的mask速记：

.masked-element { 
  mask: image mode position / size repeat origin clip composite; 
}

mask-origin and mask-clip work like the more familiar background-origin and background-clip properties.

mask-origin和mask-clip工作方式与更熟悉的background-origin和background-clip属性类似。

Although you can reorder the properties in the mask shorthand, you need to set the mask-size property after the mask-position property, separated by the “/” symbol. Also, setting mask-size without setting mask-position will result in an invalid declaration.

虽然可以重新排序的属性mask速记，你需要设置mask-size后财产mask-position属性，由“/”符号隔开。 同样，在未设置mask-position情况下设置mask-size会导致无效的声明。

Finally, since any value you fail to specify on the mask property is set back to its initial default value, using mask comes really handy when you need to reset any of the individual properties.

最后，由于您未能在mask属性上指定的任何值都被重新设置为其初始默认值，因此当您需要重置任何单个属性时，使用mask确实非常方便。

SVG mask元素 (The SVG mask Element)

Scalable Vector Graphics, or SVG for short, is an XML-based language to mark up graphics.

可伸缩矢量图形，简称SVG，是一种基于XML的语言，用于标记图形。

You can use a element inside an SVG document to add masking effects to HTML elements and other SVG graphics.

您可以在SVG文档中使用元素向HTML元素和其他SVG图形添加​​遮罩效果。

One more cool thing you can do with SVG is masking other elements on the page using text.

您可以使用SVG进行的另一项很酷的操作是使用文本屏蔽页面上的其他元素。

Let’s look closer into each of these possibilities.

让我们仔细研究每种可能性。

在HTML元素上使用SVG 元素 (Using the SVG Element on a HTML Element)

At the time of writing, using the element inside an inline SVG graphic to mask a HTML element only works in Firefox browsers. Here’s an example:

在撰写本文时，使用嵌入式SVG图形内的元素遮罩HTML元素仅在Firefox浏览器中有效。 这是一个例子：

With the following CSS:

使用以下CSS：

/* CSS */
.masked-element {
  mask: url(#mask1);
  ...more styles
}

In the code above, I’ve included a element with an id of mask1. Inside the mask I’ve placed a black and white gradient with an id of grad and a circle shape which uses the gradient as its fill color.

在上面的代码中，我包括一个id为mask1的元素。 在遮罩内部，我放置了一个黑白渐变，其id为grad，并使用圆形作为渐变颜色来填充圆形。

Finally, I’ve referenced the SVG element’s id value in the CSS mask property. This applies the masking effect to the image on the page.

最后，我在CSS mask属性中引用了SVG 元素的id值。 这会将遮罩效果应用于页面上的图像。

Just by adding a few other style declarations for the page background and the masked image, you can achieve a pretty dramatic effect like the one below:

只需为页面背景和蒙版图像添加一些其他样式声明，就可以实现一种非常显着的效果，如下所示：

Notice how the portion of the circle mask filled with the white shade of the gradient lets the masked image show through. Conversely, the portion filled with the black hue of the gradient hides the masked image.

请注意，圆形蒙版的填充有渐变的白色阴影的部分如何使被蒙版的图像显示出来。 相反，充满渐变黑色色调的部分将隐藏蒙版图像。

Here’s a live demo of this on CodePen (remember, it will only work on Firefox!).

这是在CodePen上的实时演示 (请记住，它仅在Firefox上有效！) 。

See the Pen Masking with an Inline SVG mask Element by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的带有嵌入式SVG蒙版元素的笔遮罩 。

在SVG图形上使用SVG 元素 (Using the SVG Element on an SVG Graphic)

You can use the same SVG element from the previous example, but this time to mask an SVG graphic rather than a HTML element. The advantage is that browser support is way better, including WebKit browsers and the latest IE.

您可以使用与上一个示例相同的SVG 元素，但这一次是遮罩SVG图形而不是HTML元素。 优点是浏览器支持更好，包括WebKit浏览器和最新的IE。

In the snippet below, I’m going to place the image I want to mask inside an SVG element and apply the CSS mask property to it. The CSS mask property references the SVG element with the id of mask1, like in the previous example. Here’s the code for the masked SVG graphic:

在下面的代码段中，我将要遮罩的图像放置在SVG元素内，并将CSS mask属性应用于该图像。 就像前面的示例一样，CSS mask属性引用id为mask1的SVG 元素。 这是遮罩的SVG图形的代码：

And this is the snippet that takes care of the masking operation in CSS:

这是处理CSS中屏蔽操作的代码段：

.masked-element image {
  mask: url(#mask1);
}

The result is pretty much similar to the previous example, only this time you can view it on all major browsers.

结果与前面的示例非常相似，只有这次您可以在所有主要浏览器上查看。

Have a look at the CodePen demo:

看看CodePen演示 ：

See the Pen SVG Mask on an SVG Element by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上SitePoint ( @SitePoint )上SVG元素上的Pen SVG蒙 版 。

使用SVG文字遮罩 (Masking with SVG Text)

You can perform masking operations using a text element inside your SVG mask:

您可以使用SVG遮罩中的text元素执行遮罩操作：

/* Adding background image to body element in CSS */
body {
  background: url('backdrop.jpg') center center / cover no-repeat;
}

/* CSS for text element */
#myText {
  font-size: 100px;
  font-family: impact;
  stroke: #F59DD9;
  stroke-width: 5px;
  fill: #000;
  transform: rotate(5deg);
}

/* CSS for masking */
.masked {
 mask: url("#myMask");
}

The snippet above adds a black SVG text element inside the SVG mask and applies it to a light blue SVG ellipse shape using the CSS mask property. Whatever lies behind the ellipse shape (in this case it’s the body‘s background image) will show through the text. The result looks something like this:

上面的代码段在SVG蒙版中添加了一个黑色的SVG文本元素，并使用CSS mask属性将其应用于浅蓝色SVG椭圆形。 椭圆形后面的任何内容(在本例中为body的背景图像)都将通过文本显示。 结果看起来像这样：

The full code is available on CodePen:

完整代码可在CodePen上找到 ：

See the Pen SVG Text Mask by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen SVG文本蒙 版 。

动画蒙版 (Animating Masks)

You can animate mask-position and mask-size using CSS transition and keyframe animation.

您可以使用CSS过渡和关键帧动画制作mask-position和mask-size动画。

Below is a basic keyframe animation example of a star-shaped PNG mask image.

以下是星形PNG蒙版图像的基本关键帧动画示例。

Here are the relevant code snippets:

以下是相关的代码段：

The masked element is a HTML tag:

masked元素是HTML 标记：

The masking operation uses the shorthand mask property:

掩码操作使用速记mask属性：

img {
  mask: url(star.png) 50% 10% / 80% no-repeat;
}

The .animate class on the element adds movement to the star-shaped image using CSS transform and animation:

元素上的.animate类使用CSS变换和动画将运动添加到星形图像中：

.animate {
 transform: rotate(360deg);
 animation: move 0.5s ease;
}

Launch a WebKit browser like Chrome and check out the following live demo on CodePen:

启动类似Chrome的WebKit浏览器，并在CodePen上查看以下实时演示 ：

See the Pen Animating with CSS Mask by Maria Antonietta Perna (@antonietta) on CodePen.

请参阅CodePen上的Maria Antonietta Perna( @antonietta ) 撰写的 使用CSS蒙版进行笔动画 绘制 。

使用CSS制作SVG Mask元素 (Animating an SVG Mask Element with CSS)

You can add masking effects on an tag using the SVG element and then animate it with CSS.

您可以使用SVG 元素在标签上添加遮罩效果，然后使用CSS对其进行动画处理。

Here’s a quick CodePen demo: the animation is visible on any browser, however the masking is only rendered in Firefox:

这是一个快速的CodePen演示 ：动画在任何浏览器上都是可见的，但是遮罩仅在Firefox中呈现：

See the Pen Animate SVG Mask on HTML Element by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )在HTML元素上的Pen Animate SVG蒙 版 。

The good news is that, if you apply your SVG mask on an inline SVG graphic, browser support immediately sky-rockets. Check out the same animation demo using only SVG:

好消息是，如果将SVG蒙版应用到嵌入式SVG图形上，浏览器将立即获得支持。 仅使用SVG签出相同的动画演示 ：

See the Pen Animating SVG mask on SVG Element by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上SitePoint ( @SitePoint )上SVG元素上的Pen Animating SVG蒙 版 。

浏览器对mask属性的支持 (Browser Support for the mask Property)

I’ve touched on browser support issues throughout this article. A simple breakdown of the situation at the time of writing looks like this:

在整篇文章中，我都谈到了浏览器支持问题。 在撰写本文时，情况的简单分类如下：

• PNG or external SVG image masks on HTML elements using the CSS mask property work on WebKit browsers only with the -webkit- vendor prefix.

  使用CSS mask属性HTML元素上的PNG或外部SVG图像遮罩仅在带有-webkit-供应商前缀的WebKit浏览器中起作用。

• Inline SVG mask element on a HTML element is supported only in Firefox.
  HTML元素上的嵌入式SVG掩码元素仅在Firefox中受支持。
• Inline SVG mask element on an SVG element is supported in WebKit browsers, as well as Firefox and latest Internet Explorer.
  WebKit浏览器，Firefox和最新的Internet Explorer支持SVG元素上的嵌入式SVG掩码元素。

This great CodePen demo by Yoksel offers a visual illustration of the state of the art as far as browser support goes.

Yoksel编写的这个出色的CodePen演示就浏览器支持而言提供了最新技术的直观图示。

Alan Greenblatt makes available a GitHub repository where he goes into the details of which CSS graphics-related property is supported by which browser.

Alan Greenblatt提供了一个GitHub存储库 ，他在其中详细介绍了哪个浏览器支持与CSS图形相关的属性。

The browser support compatibility table on the Can I Use website offers further details and links to more resources.

我可以使用网站上的浏览器支持兼容性表提供了更多详细信息以及指向更多资源的链接。

Although current browser support for CSS mask is not great, if you use this feature as an enhancement on a few decorative elements, users of non-supporting browser won’t even notice they’re missing out.

尽管当前浏览器对CSS mask支持不是很好，但是如果您将此功能用作对某些装饰元素的增强，则不支持该功能的浏览器的用户甚至不会注意到它们的缺失。

Finally, applying masking effects on an SVG graphic with the SVG element enjoys the widest support on modern browsers and looks great on the web.

最后，使用SVG 元素在SVG图形上应用遮罩效果在现代浏览器中获得了最广泛的支持，并且在Web上看起来很棒。

资源资源 (Resources)

• CSS Masking Module Level 1 – W3C Editor’s Draft

  CSS Masking Module Level 1 – W3C编辑器的草案

• Clipping and Masking in CSS on CSS-Tricks

  CSS技巧中CSS中的剪切和遮罩

• Codrops CSS Reference on Masking with mask-image

  Codrops有关使用mask-image进行mask-image CSS参考

• SVG on MDN

  MDN上的SVG

• SVG Masks by Jakob Jenkov

  雅各布·詹科夫(Jakob Jenkov)的SVG口罩

• CSS Masking by Dirk Schulze.

  Dirk Schulze的CSS Masking 。

Do you know of a cool masking effect on the web you’d like to share? Hit the comments box and let me know.

您是否知道要共享的网络上很酷的屏蔽效果？ 点击评论框，让我知道。

翻译自: https://www.sitepoint.com/masking-in-the-browser-with-css-and-svg/

css 中使用svg