一、标签
<use> 引用图形
<clip> 裁切图形(使用重合部分)
<mask> 蒙板(显示亮的部分)
IMG_2339.PNG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星空</title>
<style>
html,body{
margin: 0;
padding: 0;
width:100%;
height:100%;
background: #001122;
line-height: 0;
font-size: 0;
}
</style>
</head>
<body>
<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="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>
<!--定义一个三角形光束剪切path-->
<clipPath id="light-clip">
<polygon points="0 0 -400 -15 -400 15" fill="rgba(255,0,0,0.5)">
<!--定义在剪切三角形上的动画:绕着(0,0)点在二维平面内转圈-->
<animateTransform
attrbuteName="transform"
attributeType="XML"
type="rotate"
from="0"
to="360"
dur="10s"
repeatCount="indefinite">
</animateTransform>
</polygon>
<!--灯心-->
<circle cx="0" cy="0" r="2"></circle>
</clipPath>
<!--定义一个径向渐变的光束颜色-->
<radialGradient id="light" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="rgba(255,255,255,0.8)"></stop>
<stop offset="1" stop-color="rgba(255,255,255,0)"></stop>
</radialGradient>
</defs>
<!--灯塔: 填充渐变色-->
<polygon points="0 0 5 50 -5 50" fill="url(#tower)"/>
<!--椭圆光晕-->
<ellipse cx="0" cy="0" rx="300" ry="100" fill="url(#light)"
clip-path="url(#light-clip)"></ellipse>
</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>
<!--分隔线-->
<line x1="-400" y1="50" x2="400" y2="50" stroke="rgba(255,255,255,0.5)"/>
<!--投影-->
<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,0.6)"></stop>
<stop offset="0.5" stop-color="rgba(255,255,255,0)"></stop>
</linearGradient>
<!--定义一个投影蒙板:填充上面的线性渐变颜色-->
<mask id="fading">
<rect height="300" width="800" x="-400" y="0" fill="url(#fade)"/>
</mask>
</defs>
<use xlink:href="#real" transform="scale(1,-1) translate(0,-50)"/>
</g>
</svg>
</body>
<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(); //Math.random()返回0~1的double值
}
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>
</html>
总结:
IMG_2380.PNG
