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. MongoDB学习笔记四—增删改文档下

    $slice 如果希望数组的最大长度是固定的,那么可以将 $slice 和 $push 组合在一起使用,就可以保证数组不会超出设定好的最大长度.$slice 的值必须是负整数. 假设$slice的值为 ...

  2. MySQL：常见使用问题

    内容 1.Linux 上安装 MySQL 2.单机上安装多实例 3.不知root密码情况下,修改root密码 1.Linux 上安装MySQL 安装步骤: 1)解压 tar.gz文件 -linux-g ...

  3. 马哥linux运维初级+中级+高级 视频教程 教学视频 全套下载(近50G)

    马哥linux运维初级+中级+高级 视频教程 教学视频 全套下载(近50G)目录详情:18_02_ssl协议.openssl及创建私有CA18_03_OpenSSH服务及其相关应用09_01_磁盘及文 ...

  4. Asp.Net 5 新增公告仓库

    一直以来Asp.Net 5 都没有一个比较统一的公告页,对于一个在日夜更新的项目来说,很多人经常会遇到问题但是不知道去哪里寻找帮助,现在Asp.Net 5 项目组新增了一个公告仓库来解决这个问题.  ...

  5. Netty5使用自签证书实现SSL安全连接

    这次使用的Netty是最新的5.0 Alpha2版本,下载地址是:http://dl.bintray.com/netty/downloads/netty-5.0.0.Alpha2.tar.bz2,发布 ...

  6. 小丁带你走进git的世界二-工作区暂存区分支

    小丁带你走进git的世界二-工作区暂存区分支 一.Git基本工作流程 1.初始化一个仓库 git  init git  clone git仓库分为两种情况: 第一种是在现有项目或目录下导入所有文件到 ...

  7. Vue插件开发入门

    相对组件来说,Vue 的插件开发受到的关注要少一点.但是插件的功能是十分强大的,能够完成许多 Vue 框架本身不具备的功能. 大家一般习惯直接调用现成的插件,比如官方推荐的 vue-router.vu ...

  8. Docker学习总结

    本文作为总结性文章,不会详细讲解Docker.但会把已学习的.了解的内容按照由易到难的顺序串起来,更多的是帮助Docker新手快速的了解Docker,知道目前处在哪个阶段,接下来该学些什么,避免碰太多 ...

  9. iOS---基于对Sqlilte3的二次包装的第三次包装--->JKDBModel ,一个好用的离线缓存库

    https://github.com/Joker-King/JKDBModel 1.将FMDB和DBModel拖入项目中,然后添加libsqlite3.dylib   2. #import " ...

  10. [原创]MYSQL中利用外键实现级联删除和更新

    MySQL中利用外键实现级联删除.更新 MySQL支持外键的存储引擎只有InnoDB,在创建外键的时候,要求父表必须有对应的索引,子表在创建外键的时候也会自动创建对应的索引.在创建索引的时候,可以指定 ...