SVG支持的蒙板
SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧。
SVG支持的蒙板类型:
1. 裁剪路径(cliping path)
裁剪路径是由path, text或者基本图形组成的图形。所有在裁剪路径内的图形都可见,所有在裁剪路径外的图形都不可见。
2. 遮罩/蒙板(mask)
蒙板是一种容器,它定义了一组图形并将它们作为半透明的媒介,可以用来组合前景对象和背景。
裁剪路径和其他的蒙板一个重要的区别就是:裁剪路径是1位蒙板,也就是说裁剪路径覆盖的对象要么就是全透明(可见的,位于裁剪路径内部),要么就是全不透明(不可见,位于裁剪路径外部)。而蒙板可以指定不同位置的透明度。
视窗的裁剪路径 - overflow和clip属性
HTML元素的overflow属性和clip属性共同设置了该元素对内容的剪裁行为。同样的,在SVG中,这2个属性还可以使用。
overflow = visible | hidden | scroll | auto | inherit
overflow属性定义了当元素的内容超过元素的边框的时候采取的行为。
这个属性可以用于能创建新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素。这个属性的取值含义如下:
visible:显示所有内容,即使是内容已经在元素的边框外边,这个是默认值。
hidden:隐藏超出裁剪路径的内容。裁剪路径由clip属性指定。
scroll:采用滚动条的形式,呈现超出的内容。
auto:采用浏览器定义的行为,这个似乎不太可靠。
这个属性和CSS2中的同名属性基本相同,只不过在SVG中,有一些不同的处理过程:
1.overflow属性对于除了创建新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素外的元素都没有效果。
2.裁剪路径与视窗是对应的,创建了新的视窗,就创建了新的裁剪路径。默认的裁剪路径就是视窗边界。
clip = <shape> | auto | inherit
clip属性用于设置当前视窗的裁剪路径。
这个属性可以用于能创建新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素。这个属性和CSS2中同名属性有一样的参数。auto代表裁剪路径与视窗边框是一致的。当使用图形作为参数时(设置裁剪矩形的top,right,bottom和left的值), 可以使用用户坐标值(即不带单位的坐标)。例如:
新闻热点
疑难解答