【前端SVG】剪切路径和遮罩
前言
SVG
支持多种遮罩效果,使用这些特性,你可以在你的项目中生产出很多很酷炫的效果。分为剪切路径和遮罩,让我们一起来看看吧.
- 剪切路径
cliping path
- 在剪切路径内图形是可见的,在剪切路径之外的图形是不可见的。
- 遮罩
mask
- 遮罩是一种容器,它一定了一组图形并将它们作为半透明的媒介,可以用来组合前景对象和背景。
- 裁剪路径和其他的蒙板一个重要的区别就是:裁剪路径是1位蒙板,也就是说裁剪路径覆盖的对象要么就是全透明(可见的,位于裁剪路径内部),要么就是全不透明(不可见,位于裁剪路径外部)。而蒙板可以指定不同位置的透明度。
剪切
剪切路径使用clipPath
标签定义,后使用clip-path
属性引用,它用于限制一个图形的显示。当图形超出clipPath
规定的范围,那么超出的范围将不会绘制出来。这个图形可以是使用简单的图形绘画、path
、text
等图形绘制标签
下面是一个clipPath
标签使用的例子:
<svg width="200" height="200">
<defs>
<clipPath id="cTest">
<rect x="10" y="10" width="100" height="50" />
</clipPath>
</defs>
<rect x="10" y="10" width="100" height="100" fill="red" clip-path="url(#cTest)"></rect>
</svg>
这个例子,将一个100*100
的正方形遮挡了一半,因为我们使用了clipPath
限制了它的绘制范围。它甚至还可以用于text
标签,我们把上面例子的代码改改。
<svg width="200" height="200">
<defs>
<clipPath id="cTest">
<text x="10" y="20" font-size="10">用文本定范围</text></clipPath>
</defs>
<g clip-path="url(#cTest)">
<rect x="10" y="10" width="50" height="50" fill="red" />
<rect x="45" y="10" width="50" height="50" fill="green"/>
</g>
</svg>
clipPath
标签还有一个clipPathUnits
属性,用于定义用于元素内容的坐标系。
- userSpaceOnUse(默认值):
x
、y
、width
和height
表示的值都是当前用户坐标系统的值。也就是说,这些值没有缩放,都是绝对值。 - objectBoundingBox:
x
、y
、width
和height
表示的值都是当前剪切路径的图形的用户坐标系和包围图形比例值。
遮罩
遮罩的效果最令人印象深刻的是表现为一个渐变。如果你想要让一个元素淡出,你可以利用遮罩效果实现这一点。
我们简单对比下剪切路径和遮罩的区别:
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<clipPath id="cp">
<rect x="60" y="0" width="35" height="35" />
</clipPath>
<mask id="Mask">
<rect x="0" y="0" width="50" height="50" fill="url(#Gradient)" />
</mask>
</defs>
<image xlink:href="./img/1.jpg" x="0" y="0" height="50px" width="50px" mask="url(#Mask)" />
<image xlink:href="./img/1.jpg" x="60" y="0" height="50px" width="50px" clip-path="url(#cp)" />
以上例子中,我们将定义了一个简单的渐变效果,并绘制了一个矩形引用了它。最后用mask
标签包裹了这个矩形。所以实现了图片与白色之间的渐变效果。遮罩与剪切路径类似,只不过是半透明的。遮罩通常用于将两个不同的对象进行组合显示,而剪切路径用于剪切图形。
mask
还可以设置以下属性
- maskUnits: 定义
mask
标签中的坐标系统,引用该遮罩的图形的坐标系 - **maskContentUnits **: 定义
mask
标签中子元素的坐标系统 x
/y
该属性分别设置图形的x
/y
轴坐标,在mask
元素中x
/y
默认值为-10%
width
/height
该属性在用户坐标系统中标识了一个水平 / 垂直长度,在mask
元素中x
默认值为120%
最后
本篇文章讲述了在SVG
中剪切路径与遮罩相关知识,感谢你的阅读!
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanekjk
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24