标签：ack frame pat log line 12px fse 引用 style
本文将详细介绍SVG裁切和蒙版
SVG中的<clipPath>的元素，专门用来定义剪裁路径。必须设置的属性是id属性，被引用时使用
下面是一个圆形
<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" > <circle cx="25" cy="25" r="25" fill="#34538b" /> </svg>
通过引用clipPath进行路径裁剪后，如下所示
<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" > <defs> <clipPath id="clipPath1"> <rect x="0" y="0" width="20" height="20" /> </clipPath> </defs> <circle cx="25" cy="25" r="25" fill="#34538b" clip-path="url(#clipPath1)"/> </svg>
当然了， <clipPath>元素里面除了rect元素, 还可以是circle, ellipse, line, polyline, polygon, ...等等，甚至是text文本
<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" > <defs> <clipPath id="clipPath1"> <text y="20" style="font-size: 12px;">小火柴的蓝色理想</text> </clipPath> </defs> <rect x="0" y="0" width="100" height="30" fill="#cd0" clip-path="url(#clipPath1)"/> </svg>
与裁剪<clipPath>元素相比，遮罩<mask>元素所包含的子元素无须只具有线条性质的元素，可以包含任何可视化元素，甚至是<g>元素。这些可视化的子元素都必须带上透明度的定义，因为<mask>元素是通过透明度来控制图像与背景的遮罩效果的
蒙版中黑色代表不可见（opacity: 0），白色代表可见（opacity: 100%）
下面来使用黑白蒙版来制作一轮弯月
首先制作黑白蒙版
<svg height="70" style="background:gray" version="1.1" xmlns="http://www.w3.org/2000/svg" > <circle cx="25" cy="25" r="25" fill="white"/> <circle cx="40" cy="15" r="25" fill="black"/> </svg>
接下来，将上面的两个circle元素制作为蒙版，并应用在一个圆形上，制作出一轮弯月
<svg height="70" style="background:gray" version="1.1" xmlns="http://www.w3.org/2000/svg" > <mask id="moon-mask"> <circle cx="25" cy="25" r="25" fill="white"/> <circle cx="40" cy="15" r="25" fill="black"/> </mask> <circle cx="25" cy="25" r="25" fill="yellow" mask="url(#moon-mask)"/> </svg>
那么黑白之间的灰色代表什么呢？从0%到100%是一个线性的变化，所以黑白中间的灰色会是半透明，而且不同灰度代表不同程度的半透明，越趋近白色可见度越高。在蒙版中的黑白渐变，应用到彩色图层上就会产生透明度的渐变
<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" > <defs> <linearGradient id="Gradient1"> <stop offset="0" stop-color="white"/> <stop offset="100%" stop-color="black"/> </linearGradient> <mask id="mask1"> <rect x="0" y="0" width="100" height="50" fill="url(#Gradient1)" /> </mask> </defs> <rect x="0" y="0" width="100" height="50" fill="red" mask="url(#mask1)"/> </svg>
如果在当前矩形下，再叠加一个其他颜色的矩形，则会出现两种颜色渐变的效果
<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" > <defs> <linearGradient id="Gradient1"> <stop offset="0" stop-color="white"/> <stop offset="100%" stop-color="black"/> </linearGradient> <mask id="mask1"> <rect x="0" y="0" width="100" height="50" fill="url(#Gradient1)" /> </mask> </defs> <rect x="0" y="0" width="100" height="50" fill="green"/> <rect x="0" y="0" width="100" height="50" fill="red" mask="url(#mask1)"/> </svg>
[注意]如果绿色的矩形放在红色矩形后面，则不会出现以下这种效果
标签：ack frame pat log line 12px fse 引用 style
原文地址：http://www.cnblogs.com/xiaohuochai/p/7498428.html
