Fork me on GitHub

svg-引用、裁剪、蒙版

  • <use>:创建图形引用
  • <clipPath>:裁剪图形
  • <mask>:创建蒙版

1. <use>

  • <use> 标签可以绘制重复的图形元素
  • 使用 xlink:href 属性引用图形,xlink:href = “#id”
  • 原型已经设置的属性,引用会继承,并且不能覆盖

2. <clipPath>

  • 该标签用于定义剪切路径,标签内可创建任意数量的基本形状
  • 图形使用 clip-path 属性来引用 clipPath 来做裁切,clip-path=”url(#clip-id)”、
  • clip-rule 用于确定哪些点是属于裁剪路径内部的点
  • 所有在裁剪路径中的图形都可见,所有在裁剪路径外的图形都不可见

3. <mask>

  • 蒙版(mask)是一种容器,它定义了一组图形,并将他们作为半透明的媒介,可以用来组合前景对象和背景
  • 蒙版可以指定不同位置的透明度(裁剪路径要么是全透明,要么不可见)
  • 蒙版的效果,基本就是根据蒙版中每个点的颜色和透明度计算出一个最终的透明度,然后在渲染对象的时候,在对象上面罩上这个带有不同透明度的蒙版层,体现出蒙版的遮挡效果
-------------本文结束感谢您的阅读-------------