<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> html,body{padding: 0; margin: 0; width: 100%; height: 100%; background: #012;font-size: 0; line-height: 0} </style> </head> <body> <svg width="100%" height="100%" preserveAspectRatio="xMinYMin slice"> <defs> <polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="white" /> </defs> <g id="star-group"></g> <g id="ligth-tower" transform="translate(300 200)"> <defs > <linearGradient id="gradient_1" x1="0" y1="0" x2="1" y2="0"> <stop offset="0" stop-color="rgba(255,255,255,0.6)"/> <stop offset="1" stop-color="rgba(255,255,255,0.9)"/> </linearGradient> <linearGradient id="gradient_2" x1="0" y1="0" x2="1" y2="0"> <stop offset="0" stop-color="rgba(255,255,255,0.2)"/> <stop offset="1" stop-color="rgba(255,255,255,1)"/> </linearGradient> <clipPath id="clipPath-1"> <polygon points="0 -40 800 0 0 40" transform="translate(-800 -60)" /> </polygon> </clipPath> </defs> <!-- 灯塔和灯柱 --> <g> <polygon points="-10 0 10 0 0 -60" fill="url(#gradient_1)" /> <circle r="3" cx="0" cy="-60" fill="white" /> <!-- 旋转的灯光 --> <g> <ellipse rx="300" ry="150" cx="0" cy="-60" fill="url(#gradient_2)" clip-path="url(#clipPath-1)" /> <animateTransform from="0 0 -60" to="360 0 -60" type="rotate" dur="10s" repeatCount="indefinite" attributeName ="transform" begin="0s" > </animateTransform> <!-- from="0,x,y" to="360,x,y" X,Y就是你的坐标 --> </g> </g> </g> <!-- 绘制月亮 --> <g id="moon"> <defs> <mask id="mask-moon"> <circle r="100" cx="-600" cy="-250" fill="white" /> <circle r="100" cx="-550" cy="-290" fill="black" /> </mask> </defs> <circle r="100" cx="-600" cy="-250" fill="yellow" mask="url(#mask-moon)" /> </g> </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'); var starCount=500; var width=document.body.clientWidth; var height=document.body.clientHeight; var star; renderStar() setSVGViewBox() //绘制星星 function renderStar() { var starRef=document.querySelector('#star'); var starGroup=document.querySelector('#star-group'); while (starCount--) { star=use(starRef); star.setAttribute('transform','translate('+random(-width/2,width/2)+','+random(-height/2,height/2)+')'+'scale('+random(0.1,0.8)+')'); star.setAttribute('opacity',random(0.1,0.7)) starGroup.appendChild(star) } } //JS加载use方法 function use(origon){ var _use=document.createElementNS(SVG_NS,'use'); _use.setAttributeNS(XLINK_NS,'xlink:href','#'+origon.id) return _use } //大小数之间的随机 function random(min,max){ return min+(max-min)*Math.random(); } //设置svg的宽高 function setSVGViewBox(){ paper.setAttribute('viewBox',-width/2+' '+(-height/2)+' '+width+' '+height ) console.log(paper.getAttribute('viewBox')); } </script> </body> </html>
根据慕课网视频制作的，纯粹是当作一个记录，在这个DEMO中，涉及到了许多SVG的知识，基本适口的设置、绘图API、clip-path、mask蒙板的使用、animateTransform动画；