SVG之图形的引用user、剪切clip和蒙版mask

目录
一、使用标签实现图形的引用
二、使用标签实现图形的剪切
三、使用标签实现图形的蒙版
四、综合运用
一、使用<use>标签实现图形的引用

　　当我们在使用SVG绘制图形时，有时候会出现大量重复图形，这个时候我们就可以使用<use>标签进行图形引用，相当于图形的克隆。<use>标签在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中，然后将其粘贴到use元素的位置，很像HTML5中的克隆模板元素。因为克隆的节点是不可见的，所以当使用CSS样式化一个use元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的DOM不能保证继承CSS属性，除非你明文设置使用CSS继承。

　　假如我们现在想绘制满天繁星图，首先我们可以先绘制出一颗星星然后再多次引用这颗星星即可。

复制代码
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 <title>星空</title>
8 <meta name="description" content="">
9 <meta name="keywords" content="">
10 <link href="" rel="stylesheet">
11 <style type="text/css">
12 html,
13 body {
14 margin: 0;
15 padding: 0;
16 width: 100%;
17 height: 100%;
18 background: #001122;
19 line-height: 0;
20 font-size: 0;
21 /*svg标签是内联元素，防止撑满后会有滚动条出现*/
22 }
23 </style>
24 </head>
25 <body>
26 <svg width="100%" height="100%"
27 viewBox="-400 -300 800 600"
28 preserveAspectRatio="xMidYMid slice"
29 xmlns="http://www.w3.org/2000/svg">
30 
31 <def>
32 <polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="inhert" />
33 </def>
34 
35 <use x="0" y="0" xlink:href="#star" fill="red" />
36 <use x="-100" y="-100" xlink:href="#star" fill="white" />
37 <use x="100" y="100" xlink:href="#star" fill="blue" />
38 <use x="-100" y="100" xlink:href="#star" fill="green" />
39 <use x="100" y="-100" xlink:href="#star" fill="yellow" />
40 </svg>
41 </body>
42 </html>

SVG之图形的引用user、剪切clip和蒙版mask

猜你喜欢