html5图片蒙版,HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用

SVG支持的蒙板

SVG支持多种蒙板特效，使用这些特性，我们可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了，这里都叫做蒙板吧。

SVG支持的蒙板类型：

1. 裁剪路径(cliping path)

裁剪路径是由path, text或者基本图形组成的图形。所有在裁剪路径内的图形都可见，所有在裁剪路径外的图形都不可见。

2. 遮罩/蒙板(mask)

蒙板是一种容器，它定义了一组图形并将它们作为半透明的媒介，可以用来组合前景对象和背景。

裁剪路径和其他的蒙板一个重要的区别就是：裁剪路径是1位蒙板，也就是说裁剪路径覆盖的对象要么就是全透明(可见的，位于裁剪路径内部)，要么就是全不透明(不可见，位于裁剪路径外部)。而蒙板可以指定不同位置的透明度。

视窗的裁剪路径- overflow和clip属性

HTML元素的overflow属性和clip属性共同设置了该元素对内容的剪裁行为。同样的，在SVG中，这2个属性还可以使用。

overflow = visible | hidden | scroll | auto | inheritoverflow属性定义了当元素的内容超过元素的边框的时候采取的行为。

这个属性可以用于能创建新视窗的元素(svg,symbol,image,foreignObject),pattern和marker元素。这个属性的取值含义如下：

visible：显示所有内容，即使是内容已经在元素的边框外边，这个是默认值。

hidden：隐藏超出裁剪路径的内容。裁剪路径由clip属性指定。

scroll：采用滚动条的形式，呈现超出的内容。

auto：采用浏览器定义的行为，这个似乎不太可靠。

这个属性和CSS2中的同名属性基本相同，只不过在SVG中，有一些不同的处理过程：

1.overflow属性对于除了创建新视窗的元素(svg,symbol,image,foreignObject),pattern和mark