SVG学习(6)

发表于 | 分类于 ， ， | 阅读次数:

图形的引用、裁切和蒙版

<use>标签创建图形引用
例子：满天星星

<clip>标签裁切图形
例子：绘制灯塔的光线

<mask>标签创建蒙版
例子：绘制月牙及湖面倒影

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<style>
	html,body{margin: 0;padding: 0;width: 100%;height: 100%;background: #012;line-height: 0;font-size: 0;}
</style>
<svg width="100%" height="100%" viewBox="-400 -300 800 600" preserveAspectRatio="xMidYMid slice">
	<defs>
		<polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="white"></polygon>
	</defs>
	<g id="real">
		<g id="star-group"></g>
	    <g id="moon-group">
	    	<mask id="moon-mask">
	        	<circle cx="-250" cy="-150" r="100" fill="white"></circle>
	        	<circle cx="-200" cy="-200" r="100" fill="black"></circle>
	    	</mask>
	        <circle cx="-250" cy="-150" r="100" fill="yellow" mask="url(#moon-mask)"></circle>
	    </g>
		<g id="light-tower" transform="translate(250, 0)">
			<defs>
				<linearGradient id="tower" x1="0" y1="0" x2="1" y2="0">
					<stop offset="0" stop-color="#999"></stop>
					<stop offset="1" stop-color="#333"></stop>
				</linearGradient>
				<radialGradient id="light" cx="0.5" cy="0.5" r="0.5">
					<stop offset="0" stop-color="rgba(255,255,255,.8)"></stop>
					<stop offset="1" stop-color="rgba(255,255,255,0)"></stop>
				</radialGradient>
				<clipPath id="light-clip">
					<polygon points="0 0 -400 -15 -400 15" fill="rgba(255,0,0,.5)">
						<animateTransform
							attributeName="transform"
							attributeType="XML"
							type="rotate"
							from="0"
							to="360"
							dur="10s"
							repeatCount="indefinite"
						></animateTransform>
					</polygon>
					<circle cx="0" cy="0" r="2"></circle>
				</clipPath>
			</defs>
			<polygon points="0 0 5 50 -5 50" fill="url(#tower)"></polygon>
			<ellipse cx="0" cy="0" rx="300" ry="100" fill="url(#light)" clip-path="url(#light-clip)"></ellipse>
		</g>
	</g>
	<g id="reflact" transform="translate(0 50)" mask="url(#fading)">
		<defs>
			<linearGradient id="fade" x1="0" y1="0" x2="0" y2="1">
				<stop offset="0" stop-color="rgba(255,255,255,.3)"></stop>
				<stop offset="0.5" stop-color="rgba(255,255,255,0)"></stop>
			</linearGradient>
			<mask id="fading">
				<rect x="-400" y="0" width="800" height="300" fill="url(#fade)"></rect>
			</mask>
		</defs>
		<use xlink:href="#real" transform="scale(1, -1) translate(0 -50)" />
	</g>
	<line x1="-400" y1="50" x2="400" y2="50" stroke="white"></line>
</svg>
<script>
	var SVG_NS = 'http://www.w3.org/2000/svg';
	var XLINK_NS = 'http://www.w3.org/1999/xlink';
	var paper = document.querySelector('svg');

	renderStar();

	function use(origin) {
		var _use = document.createElementNS(SVG_NS, 'use');
		_use.setAttributeNS(XLINK_NS, 'xlink:href', '#' + origin.id);
		return _use;
	}

	function random(min, max) {
		return min + (max - min) * Math.random();
	}

	function renderStar(){
		var starRef = document.getElementById('star');
		var starGroup = document.getElementById('star-group');
		var starCount = 500;

		var star;
		while (starCount--) {
			star = use(starRef);
			star.setAttribute('opacity', random(0.1, 0.4));
			star.setAttribute('transform',
				'translate(' + random(-400, 400) + ',' + random(-300,50) + ')' +
				'scale(' + random(0.1, 0.6) + ')'
				);
			starGroup.appendChild(star);
		}
	}
</script>

示例：点击查看

总结

  • <use>
    xlink:href=”#id”
  • <clipPath>
    clip-path=”url(#clip-id)”
  • <mask>
    mask=”url(#mask-id)”

根据慕课网课程整理