svg绘制蓝色星空，月亮，旋转灯塔
生活随笔
收集整理的這篇文章主要介紹了
svg绘制蓝色星空，月亮，旋转灯塔
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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動畫；
總結
以上是生活随笔為你收集整理的svg绘制蓝色星空，月亮，旋转灯塔的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： NSString 练习
- 下一篇： Elasticsearch学习笔记之—m