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>

效果：

结论：

蒙板的效果，基本就是根据蒙板中每个点的颜色和透明度计算出一个最终的透明度，然后在渲染对象的时候，在对象上面罩上这个带有不同透明度的蒙板层，体现出蒙板的遮挡效果。

总结

关于蒙板的，我还是有个疑问，就是这个计算透明度的具体方式。这个问题牵涉出每个点的颜色跟最终的透明度的关系，是否存在某些颜色算出的最终的透明度是一样的（我在尝试蒙板代码时，发现Mask2只要不是设置黑白，其他颜色的效果都一样）。

参考文献

1. http://www.jb51.net/html5/72268.html

2. http://blog.csdn.net/cuixiping/article/details/7848369

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/6006264.html

SVG图形引用、裁切、蒙版的更多相关文章

  1. 多个SVG图形集成到一个SVG图形上

    SVG:使用XML格式定义图像的可缩放矢量图形(Scalable Vector Graphics). 优点就不多说了,下面看看怎么将多个svg图形集成到一个svg图形上. 如果使用bootstrap框 ...

  2. react使用引入svg的icon；svg图形制作

    由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...

  3. js实现svg图形转存为图片下载

    我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...

  4. SVG.js 引用获取整理

    一.SVG.get() 根据id获取元素 var draw = SVG('svg1').size(300, 300); var circle = draw.circle(50); circle.fil ...

  5. js实现svg图形转存为图片下载[转]

    我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...

  6. SVG图形的简单修改

    svg格式的图片是一种矢量图片,最近我就喜欢使用这种图片在做html的元素.网上也有很多现成的svg图片,比如:http://www.sfont.cn这个网站,就能很快的找到各种您想要的图片.但是下载 ...

  7. C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形

    原文:C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形 在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形     最近在写WPF界面的时候遇到一个情 ...

  8. 学习SVG系列（2）：SVG图形系列

    SVG形状: 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 & ...

  9. NodeJs生成SVG图形验证码

    背景:短信接口有调用限制,如果受到恶意攻击,很容易就爆掉,所以需要一系列验证机制,后端采用签名加密的方式,而前端要做人机识别,有两个要求: 1)不能使用文本式的验证码,很简单就能拿到 2)所有验证逻辑 ...

随机推荐

  1. myrocks复制中断问题排查

    背景 mysql可以支持多种不同的存储引擎,innodb由于其高效的读写性能,并且支持事务特性,使得它成为mysql存储引擎的代名词,使用非常广泛.随着SSD逐渐普及,硬件存储成本越来越高,面向写优化 ...

  2. 排序算法----基数排序（RadixSort（L））单链表智能版本

    转载http://blog.csdn.net/Shayabean_/article/details/44885917博客 先说说基数排序的思想: 基数排序是非比较型的排序算法,其原理是将整数按位数切割 ...

  3. DDD设计中的Unitwork与DomainEvent如何相容？

    最近在开发过程中,遇到了一个场景,甚是棘手,在这里分享一下.希望大家脑洞大开一起来想一下解决思路.鄙人也想了一个方案拿出来和大家一起探讨一下是否合理. 一.简单介绍一下涉及的对象概念 工作单元:维护变 ...

  4. MonoDevelop 4.2.2/Mono 3.4.0 in CentOS 6.5 安装笔记

    MonoDevelop 4.2.2/Mono 3.4.0 in CentOS 6.5 安装笔记 说明 以root账户登录Linux操作系统,注意:本文中的所有命令行前面的 #> 表示命令行提示符 ...

  5. Mac OS X 上编写 ASP.NET vNext (二) IDE配置

    上一篇中介绍了如何在OS X上搭建.Net运行时.不过光有运行时还不够,还需要有一个好用的IDE,有了IDE的支持,OS X上的开发才称为可能. 和上篇类似,这里先列举出具体步骤,个人可以根据自己的情 ...

  6. 微软发布 Windows Server 2016 预览版第三版，开发者要重点关注Nano Server

    微软已经发布 Windows Server 2016 和 System Center 2016 第三个技术预览版,已经提供下载.Windows Server 2016 技术预览版第三版也是首个包括了容 ...

  7. 《图解HTTP》读书笔记

    目前国内讲解HTTP协议的书是在太少了,记忆中有两本被誉为经典的书<HTTP权威指南>与<TCP/IP详解,卷1>,但内容晦涩难懂,学习难度较大.其实,HTTP协议并不复杂,理 ...

  8. TODO：Golang语言TCP/UDP协议重用地址端口

    TODO:Golang语言TCP/UDP协议重用地址端口 这是一个简单的包来解决重用地址的问题. go net包(据我所知)不允许设置套接字选项. 这在尝试进行TCP NAT时尤其成问题,其需要在同一 ...

  9. 关于php语言的使用！

    ------php语言与JavaScript的使用 方法是相似 <script type="text/javascript"> </script>--js与 ...

  10. SQLServer 数据库镜像+复制方案

    目标: 主机做了Mirror和Replication,当主机出现问题时,Replication和Mirror实现自动的故障转移(Mirror 和Replication都切换到备机,而当主机 重新启动后 ...