首页 > > 网页制作 > css >

SVG图形引用、裁切、蒙版

2018-06-24 00:35:21来源：未知阅读 ()

SVG图形引用、裁切、蒙版，使用三个标签：

1. <use>标签创建图形引用
2. <clipPath>标签裁切图形
3. <mask>标签创建蒙版

<use>标签

<use>标签使用URI引用一个<g>,<svg>或其他具有一个唯一的ID属性和重复的图形元素。复制的是原始的元素，因此文件中的原始存在只是一个参考，原始影响到所有副本的任何改变。

<use>标签，使用xlink:href属性引用图形，xlink:href="#id" 。

例子：

<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>SVG-demo</title>
          <style>
               html,body{
                    width:100%;
                    height:100%;
                    margin:0;
                    padding:0;
               }
          </style>
     </head>
<body>   
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <rect id="rU" x="0" y="0" width="100" height="100" fill="red" />
     <text x="50" y="50" text-anchor="middle" fill="white">原型</text>
     <use xlink:href="#rU" y="120"/>
     <text x="50" y="180" text-anchor="middle" fill="white">简单引用</text>
     <use xlink:href="#rU" y="240" fill="green"/>
     <text x="50" y="300" text-anchor="middle" fill="white">改fill绿色</text>
     <use xlink:href="#rU" x="120" y="0" width="50" height="50"/>
     <text x="170" y="50" text-anchor="middle" fill="white">设小宽高</text>
     <use xlink:href="#rU" x="120" y="120" width="200" height="200"/>
     <text x="170" y="180" text-anchor="middle" fill="white">设大宽高</text>
     <use xlink:href="#rU" x="120" y="240" style="background:green;"/>
     <text x="170" y="300" text-anchor="middle" fill="white">设置样式</text>
     <use xlink:href="#rU" x="240" y="0" stroke="blue" stroke-width="2" />
     <text x="290" y="50" text-anchor="middle" fill="white">额外边框</text>
</svg>
</body>
</html>

效果：

结论：

从上面代码可以得出，原型已经设置的属性，引用会继承，并且不能覆盖，除了x、y。所以想引用能够设某个属性，那原型就不能设置。

<clipPath>标签

<clipPath>标签用来定义剪切路径，标签内可创建任意数量的基本形状，包括<path>和<text>元素。图形使用clip-path属性来引用clipPath来做裁切， clip-path="url(#clip-id)" 。

clip-rule

clip-rule = "nonzero(默认值) | evenodd | inherit"
这个属性用于确定哪些点是属于裁剪路劲内部的点。对于简单的封闭图形，这个很好判定，但是对于复杂的内部有洞的图形，就有区别了。这个属性的取值与fill-rule的取值含义是一样的。

PS：fill-rule计算方式可以查看：http://blog.csdn.net/cuixiping/article/details/7848369

例子：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
          <clipPath id="c-star">
               <polygon points="150 100 179.389 9.54915 102.447 65.4509
　　　　　　　　　    197.533 65.4509 120.611 9.54915"/>
          </clipPath>
          <clipPath id="c-star-rule">
               <polygon points="150 100 179.389 9.54915 102.447 65.4509 197.533 
                   65.4509 120.611 9.54915" transform="translate(-100)" clip-rule="evenodd"/>
          </clipPath>
          <clipPath id="c-two-grap">
               <polygon points="150 100 179.389 9.54915 102.447 65.4509 
　　　　　　　　     197.533 65.4509 120.611 9.54915" transform="translate(0, 100)" />
               <rect x="100" y="100" width="50" height="50" />
          </clipPath>
     </defs>
     <rect x="100" y="0" fill="red" width="100" height="100" clip-path="url(#c-star)"/>
     <rect x="0" y="0" fill="green" width="100" height="100" clip-path="url(#c-star-rule)"/>
     <rect x="100" y="100" fill="blue" width="100" height="100" clip-path="url(#c-two-grap)"/>
</svg>

效果：

结论：

所有在裁剪路径内的图形都可见，所有在裁剪路径外的图形都不可见。

<mask>标签

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

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

例子：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
          <linearGradient id="Gradient" 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 id="Mask" maskUnits="userSpaceOnUse" x="0" y="0" width="800" height="300">
               <rect x="0" y="0" width="800" height="300" fill="url(#Gradient)" />
          </mask>
          <mask id="Mask2" maskUnits="userSpaceOnUse" x="0" y="0" width="800" height="300">
               <rect x="0" y="0" width="800" height="300" fill="red" />
          </mask>
          <text id="Text" x="400" y="200" font-family="Verdana" font-size="100" 
　　　　　　　　text-anchor="middle" >
               Masked text
          </text>
     </defs>
     <rect x="0" y="0" width="800" height="300" fill="none" />
     <use xlink:href="#Text" fill="blue" y="-100" />
     <use xlink:href="#Text" fill="blue" mask="url(#Mask)" />
     <use xlink:href="#Text" fill="blue" mask="url(#Mask2)" y="100" />
</svg>