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. 敏捷测试模式之Scrum及其实践

    一.    敏捷开发模式简介 敏捷是近年来软件研发领域很火的一个词,采用敏捷开发模式的研发团队是越来越多了,尤其是敏捷模式中的Scrum更是佼佼者大行其道,这表明敏捷模式确有其好处,能给企业带来效率的 ...

  2. Github使(zhuang)用(bi)指南

    本文针对未能熟练使用GitHub的人员,旨在为其指明通往新世界的小路. 一些闲话可以无视 在这个开源的时代,可能你听说过GitHub,知道大概是个什么.但是,你要是不能熟练的玩起来,怎么和大神取经,怎 ...

  3. JavaWeb的国际化

    国际化 1.国际化开发概述 1.1.软件的国际化 软件开发时,要使它能同时应对世界不同地区和国家的方法,并针对不同地区和国家的方法,提供相应的,符合来访者阅读习惯的页面或数据 国际化简称:i18n : ...

  4. WPF自定义控件第一 - 进度条控件

    本文主要针对WPF新手,高手可以直接忽略,更希望高手们能给出一些更好的实现思路. 前期一个小任务需要实现一个类似含步骤进度条的控件.虽然对于XAML的了解还不是足够深入,还是摸索着做了一个.这篇文章介 ...

  5. ASP.NET MVC 5 Web编程3 -- Controller的应用及扩展

    Controller基础 一. 访问修饰符 1.1 类的访问修饰符 Controller类的访问修饰符必须是public,url才能被拦截. internal能编译通过,但无法拦截url请求.priv ...

  6. 【原】彻底解决WPS弹出热点广告、WPS购物图标的办法

    一直用WPS,但一直有一个问题迟迟没有解决,那就是讨厌的WPS广告问题! 每次开机都会自动在托盘上闪烁图标:“WPS购物”和“WPS热点”! 用自定义托盘图标隐藏都不管用,自动又会给改回来!这简直是流 ...

  7. CATransition自定义转场动画

    我们可以通过CATransiton来自定义一些漂亮的转场动画, CATransition继承自CAAnimation, 所以用法跟CAAnimation差不多 先直接上一个代码: #import &q ...

  8. FireFox调试手机浏览器

    https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android IN THIS ARTICLE ...

  9. cookie——小甜品

    Cookie最早是网景公司的前雇员Lou Montulli在1993年3月的发明.Cookie英文意指饼干,不过在电脑术语中它可不像饼干那么简单.简单的说,Cookie就是服务器暂存放在你计算机上的一 ...

  10. 多线程同步工具——CAS原子变量

    这是我参考的一篇文章<基于CAS的乐观锁实现>,讲述的是一种需要CPU支持的执行技术CAS(Compare and Swap). 首先理解什么是原子性操作,意思是不能再拆分的操作,例如改写 ...