<!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. 使用jquery时弹出[object HTMLImageElement]问题

    本打算写一个轮播图,但是获取到图像后想改变图片地址,却jq方法各种不能实现,开始以为是jq文件弄错了,用百度的cdn试了下还是报错. 于是开始了alert调试. 我是用的jquery获取类 var a ...

  2. Android IOS WebRTC 音视频开发总结（四六）-- 从另一个角度看国内首届WebRTC大会

    文章主要从开发者角度谈国内首届WebRTC大会,支持原创,文章来自博客园RTC.Blacker,支持原创,转载必须说明出处,更多详见www.rtc.help. -------------------- ...

  3. 三、第一个Struts2应用案例（编码步骤）

    第一个Struts2应用案例(编码步骤) 编写2个jsp hello.jsp <body>     <a href="${pageContext.request.conte ...

  4. Linux程序分析工具:ldd和nm

    ldd和nm是Linux下两个非常实用的程序分析工具.其中,ldd是用来分析程序运行时需要依赖的动态链接库的工具,nm是用来查看指定程序中的符号表信息的工具. 1 ldd 格式:ldd [option ...

  5. wpf仿QQ之窗体翻转

    很久以前在网上找过窗体翻转的Demo,但看得不是很明白,大多是内容的翻转,研究了下,现在分享给大家. 利用UIElement.RenderTransform 属性就能实现元素的呈现位置的转换,因此只需 ...

  6. Custom Sort Order

    When trying to sort based on values that do not fit the standard ascending and descending sort logic ...

  7. C#中使用官方驱动操作MongoDB

    想要在C#中使用MongoDB,首先得要有个MongoDB支持的C#版的驱动.C#版的驱动有很多种,如官方提供的,samus. 实现思路大都类似.这里我们先用官方提供的mongo-csharp-dri ...

  8. 将List<T>转化成 DataTable--调整可空类型的转化错误

    加载表结构并保持成XML string cmdText = @"select * from kb_lable_temp where 1=2"; using (SqlConnecti ...

  9. 用户View，五大布局

    1.LinearLayout 线性布局 android:orientation="horizontal" 制定线性布局的排列方式 水平 horizontal 垂直 vertical ...

  10. 【转】代码编辑器（二）-SynEdit

    在我去年的时候我就有这个了,而且这是我第二个第三方的控件(第一个是DevExpress),这个是专门做代码编辑器的.安装方法:点我. 安装成功了之后,会在Tool Palette看到两个:SynEdi ...