svg绘制蓝色星空,月亮,旋转灯塔DEMO

目录

XXX.jpg
根据慕课网视频制作的,在这个DEMO中,涉及到了许多SVG的知识,基本适口的设置、绘图API、clip-path、mask蒙板的使用、animateTransform动画;

<!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"  ></polygon>
        </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>
                  <stop offset="1" stop-color="rgba(255,255,255,0.9)"></stop>
                </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>
                  <stop offset="1" stop-color="rgba(255,255,255,1)"></stop>
                </linearGradient>
                <clipPath id="clipPath-1">
                    <polygon points="0 -40 800 0 0 40" transform="translate(-800 -60)" ></polygon>

                    </polygon>
                </clipPath>
            </defs>
            <!-- 灯塔和灯柱 -->
            <g>
                <polygon points="-10 0 10 0 0 -60" fill="url(#gradient_1)" ></polygon>
                <circle r="3" cx="0" cy="-60" fill="white" ></circle>
                <!-- 旋转的灯光 -->
                <g>
                    <ellipse rx="300" ry="150" cx="0" cy="-60" fill="url(#gradient_2)" clip-path="url(#clipPath-1)" ></ellipse>
                    <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>
                    <circle r="100" cx="-550" cy="-290" fill="black" ></circle>
                </mask>
            </defs>
            <circle r="100" cx="-600" cy="-250" fill="yellow" mask="url(#mask-moon)"  ></circle>
        </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>

文章最后编辑时间为:2016-08-30 13:52:00

标签: svg

声明:本博客如无特殊说明皆为原创,转载请注明来源:svg绘制蓝色星空,月亮,旋转灯塔DEMO谢谢!

相关文章

发表评论:

icon_question.pngicon_razz.pngicon_sad.pngicon_evil.pngicon_exclaim.pngicon_smile.pngicon_redface.pngicon_biggrin.pngicon_surprised.pngicon_eek.pngicon_confused.pngicon_cool.pngicon_lol.pngicon_mad.pngicon_twisted.pngicon_rolleyes.pngicon_wink.pngicon_idea.pngicon_arrow.pngicon_neutral.pngicon_cry.pngicon_mrgreen.png