|
<g clip-rule="nonzero">
<clipPath>
<path d="..." />
</clipPath>
<rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>
最后看裁剪路径的一个小例子：
复制代码 代码如下:
<svg>
<g>
<clipPath>
<path d="M 10,10 L 10,20 L 20,20 L 20,10 Z" clip-rule="evenodd" />
</clipPath>
</g>
<rect clip-path="url(#MyClip)" x="10" y="10" fill="Red" />
</svg>
矩形只有左上角10*10的区域是可见的。
蒙板- mask元素
在SVG中，你可以为渲染的对象指定任何的图形元素或者g元素作为蒙板，来将渲染对象组合到背景中。
蒙板用mask元素定义，使用蒙板的时候只需要在对象的mask属性中引用蒙板就可以了。
mask元素可以包含任何的图形元素和容器元素(例如g)。
蒙板的效果其实大家也比较清楚，基本就是根据蒙板中每个点的颜色和透明度计算出一个最终的透明度，然后在渲染对象的时候，在对象上面罩上这个带有不同透明度的蒙板层，体现出蒙板的遮挡效果。对于渲染对象来说，只有在蒙版内的部分会按照蒙板上点的透明度来渲染，不在蒙板内的部分不显示。看下面的例子：
复制代码 代码如下:
<svg viewBox="0 0 800 300" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient gradientUnits="userSpaceOnUse"
x1="0" y1="0" x2="800" y2="0">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask maskUnits="userSpaceOnUse"
x="0" y="0">
<rect x="0" y="0" fill="url(#Gradient)" />
</mask>
<text x="400" y="200"
font-family="Verdana" font-size="100" text-anchor="middle" >
Masked text
</text>
</defs>
<!-- 视窗的背景 -->
<rect x="0" y="0" fill="#FF8080" />
<!-- 第一步绘制一个带有蒙板的Text，可以看到蒙板的透明度效果已经应用到字上了.
第二步是绘制一个不带蒙板的Text，来作为第一步Text的轮廓 -->
<use xlink:href="#Text" fill="blue" mask="url(#Mask)" />
<use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" />
</svg>
效果如下图所示：
大家可以试着将上面mask元素中的rect元素的width改成500，你会看到Text的一部分不显示了，这就是因为那部分已经超出蒙板的范围了。这里其实也看到了，上面的裁剪路径只不过是一种特殊的蒙板(每个点的透明度要么是0，要么是1)。
蒙板的定义和使用已经介绍了，下面看几个重要的属性：
maskUnits = "userSpaceOnUse | objectBoundingBox(默认值)"
定义了mask元素中坐标(x,y)和长度(width,height)的坐标系统：使用引用该蒙板的元素的用户坐标系，或者是使用相对于引用蒙板的元素的包围盒的相对值。这个值的含义与前面章节中的单位含义是相同的。
maskContentUnits = "userSpaceOnUse(默认值) | objectBoundingBox"
定义了mask元素中子元素的坐标系统。
x, y, width, height
定义了蒙板的位置和大小，在默认的objectBoundingBox坐标下，默认值分别为-10%,-10%,120%,120%。
此外要注意：蒙板不会直接渲染，只会在引用的地方起作用，所以display,opacity等属性对于mask元素来说都是不起作用的。
实用参考：
脚本索引：(v=vs.85).aspx
开发中心：https://developer.mozilla.org/en/SVG
热门参考：
官方文档： （编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
