<!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绘制蓝色星空，月亮，旋转灯塔的更多相关文章

  1. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

  2. 程序猿必备的10款超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了10个非 ...

  3. 使用SVG绘制湖南地图

    项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考. 1.首先准备一张湖南地图(仅有各市边界线即可).(图片最好是PNG的,除了地图其它什么也没有) 2.准备SVG编辑工具SVGDe ...

  4. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

  5. html 5新特性 --用SVG绘制的微信logo

    一个简单的SVG绘制图片的小案例. 效果图: 代码如下: <style> * { ; ; } body { background-color: #d5d3d4; } .container ...

  6. SVG绘制圆形简单示例分享

    今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...

  7. svg绘制一个简单地饼图

    一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  8. SVG绘制图形

    一.SVG介绍 1.SVG指可伸缩矢量图片 2.SVG用来定义用于网络的基于矢量的图形 3.SVG使用XML格式定义图形 4.SVG图像在放大或改变尺寸的情况下其图形质量不会有损失 5.SVG是万维网 ...

  9. 使用SVG绘制流程图

    本篇主要记录流程图的实现过程中的难点和核心技术点,先上效果图: 节点可以任意拖拽,曲线跟随变化 正在连接的线 1.节点实现 流程图是基于SVG绘制的,节点主要利用 g 和 foreignObject的 ...

随机推荐

  1. xcode不能连接svn以及不能导入的解决方法

    配置svn的方法不多说,网上一堆.这里要说的是怎么解决连接不上svn以及在xcode中不能修改svn目录的问题.   首先,xcode连接不上linux的svn,一般来说,问题就出在端口上.svn的默 ...

  2. Idea基本设置

    1.idea 如何更改比编辑器文本字体和大小 换上了intellij idea之后,第一件事就是想要改变下文字字体,因为在我这个27寸的2k分辨率的屏幕上,文字显然太小了. intellij idea ...

  3. 关于使用SVN update时出现：E155004错误

    今天早上到公司开了电脑,准备update下SVN的代码,但是在update时出现svn: E155004: Working copy 'E:\XX' locked  错误,乍眼一看以为是什么配置出错, ...

  4. Java编程性能优化

    1尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面: 第一,控制资源的使用,通过线程同步来控制资 ...

  5. Linux下的Source命令及脚本的执行方式解析

    Linux Source命令及脚本的执行方式解析 http://blog.csdn.net/wangyangkobe/article/details/6595143 当我修改了/etc/profile ...

  6. firefox 扩展开发笔记（三）:高级ui交互编程

    firefox 扩展开发笔记(三):高级ui交互编程 前言 前两篇链接 1:firefox 扩展开发笔记(一):jpm 使用实践以及调试 2:firefox 扩展开发笔记(二):进阶开发之移动设备模拟 ...

  7. （转）Android系统自带Activity样式(@android:style/)

    在AndroidManifest.xml文件的activity中配置 1.android:theme="@android:style/Theme" 默认状态,即如果theme这里不 ...

  8. 表格控件表头栏目（Column）与数据表头步

    不用手工增加栏目的列,也就是Column,由数据库的查询结果自动创建. 用的是Delphi2010,安装了Dev,用CxGrid显示数据库查询结果.用什么控件没有关键,道理相同的.

  9. 信驰达携“Zigbee Light Link灯控方案”亮相第18届广州国际照明展

    2013年6月9日至12日,第18届广州国际照明展览会在琶洲中国进出口商品交易会展馆举行,作为全球照明及LED行业风向标和晴雨表,本次展会吸引了来自27个国际及地区,共2600多家企业参展.我公司受T ...

  10. AngularJs记录学习01

    <!doctype html> <html ng-app="myapp"> <head> <meta http-equiv="C ...