SVG图形引用、裁切、蒙版

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图形引用、裁切、蒙版的更多相关文章

多个SVG图形集成到一个SVG图形上
SVG:使用XML格式定义图像的可缩放矢量图形(Scalable Vector Graphics). 优点就不多说了,下面看看怎么将多个svg图形集成到一个svg图形上. 如果使用bootstrap框 ...
react使用引入svg的icon；svg图形制作
由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...
js实现svg图形转存为图片下载
我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...
SVG.js 引用获取整理
一.SVG.get() 根据id获取元素 var draw = SVG('svg1').size(300, 300); var circle = draw.circle(50); circle.fil ...
js实现svg图形转存为图片下载[转]
我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...
SVG图形的简单修改
svg格式的图片是一种矢量图片,最近我就喜欢使用这种图片在做html的元素.网上也有很多现成的svg图片,比如:http://www.sfont.cn这个网站,就能很快的找到各种您想要的图片.但是下载 ...
C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形
原文:C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形最近在写WPF界面的时候遇到一个情 ...
学习SVG系列（2）：SVG图形系列
SVG形状: 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 & ...
NodeJs生成SVG图形验证码
背景:短信接口有调用限制,如果受到恶意攻击,很容易就爆掉,所以需要一系列验证机制,后端采用签名加密的方式,而前端要做人机识别,有两个要求: 1)不能使用文本式的验证码,很简单就能拿到 2)所有验证逻辑 ...

随机推荐

vim+vundle配置
Linux环境下写代码虽然没有IDE,但通过给vim配置几个插件也足够好用.一般常用的插件主要包括几类,查找文件,查找符号的定义或者声明(函数,变量等)以及自动补全功能.一般流程都是下载需要的工具,然 ...
JavaWeb的国际化
国际化 1.国际化开发概述 1.1.软件的国际化软件开发时,要使它能同时应对世界不同地区和国家的方法,并针对不同地区和国家的方法,提供相应的,符合来访者阅读习惯的页面或数据国际化简称:i18n : ...
【腾讯Bugly干货分享】微信热补丁Tinker的实践演进之路
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57ad7a70eaed47bb2699e68e Dev Club 是一个交流移动 ...
吐血大奉献，打造cnblogs最新最火辣的css3模板（IE9以下请勿入内） -- 第一版
一直自己都想给自己的博客打造一个独一无二的皮肤,但是一直没有强劲的动力去完成这件事情.后来凭借着工作上面的需求(涉及到css3),就把自己的博客当成一个最好的试验场地.从而产生了你现在所看到的这个模板 ...
The Coroutine
关于Coroutine 说到coroutine就不的不说subroutine,也就是我们常用到的一般函数.调用一个函数开始执行,然后函数执行完成后就退出,再次调用的时候,再从头开始,调用之间是没有保存 ...
(转)linux下和云端通讯的例程, ubuntu和openwrt实验成功(一)
一. HTTP请求的数据流总结#上传数据, yeelink的数据流如下POST /v1.0/device/4420/sensor/9089/datapoints HTTP/1.1Host: api. ...
惊心动魄的一上午，感谢eclipse 的文件恢复功能
昨晚倒腾了半天android 的程序,夜里三点多了,不争气的笔记本由于太热,突然熄火.话说就在昨天还在想着一定要把东西放到svn上,防止文档找不到或者笔记本丢失带来的严重后果.呵呵,就是这么想着,今天 ...
CI Weekly #6 | 再谈 Docker / CI / CD 实践经验
CI Weekly 围绕『软件工程效率提升』进行一系列技术内容分享,包括国内外持续集成.持续交付,持续部署.自动化测试. DevOps 等实践教程.工具与资源,以及一些工程师文化相关的程序员 Ti ...
[原创]MYSQL中利用外键实现级联删除和更新
MySQL中利用外键实现级联删除.更新 MySQL支持外键的存储引擎只有InnoDB,在创建外键的时候,要求父表必须有对应的索引,子表在创建外键的时候也会自动创建对应的索引.在创建索引的时候,可以指定 ...
使用PowerShell收集多台服务器的性能计数器
写在前面当管理多台Windows Server服务器时(无论是DB.AD.WEB以及其他的应用服务器),当出现性能或其他问题后,参阅性能计数器都是一个非常好的维度从而推测出问题可能出现的原因 ...

SVG图形引用、裁切、蒙版

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

随机推荐

热门专题