资讯专栏INFORMATION COLUMN

html5之svg

Salamander / 1686人阅读

HTML5之svg
矢量图,缩放不变形。
1. 绘制基础 1.1标签绘制



    
    svg基础




   








    

1.2 js绘制



    
    demo


    

    

1.3 path绘制



    
    svg


    
        
        

        
        
        
        
        
       
       
        

        
        
        
        
        
        
    


1.4 文本绘制



    
    svg


    
        SVGA文本插入
        
    

2.动画基础 2.1 直线动画



    
    svg动画


    
        
            
             
        
    


2.2 弧线动画



    
    svg动画


    
        
            
        
    

2.3 轨迹动画



    
    svg动画


    
        
            
        
            
                
            
        
        
    


2.4 文本动画



    
    svg


    
        
            
                
            
        
        

        ABCDEFGHIJKLMNOPQRSTUVWXYZ
        
    

    

2.5 动画综合练习
vector.js
(function(){
            function Vector(x,y){
                this.x = x || 0;
                this.y = y || 0;
            }
            Vector.prototype = {
                constructor:Vector,
                square:function(){
                    return this.x * this.x + this.y * this.y; 
                },
                length:function(){
                    return Math.sqrt(this.square()); 
                },
                add:function(q){
                    return new Vector(this.x + q.x,this.y+q.y); 
                },
                minus:function(q){
                    return new Vector(this.x - q.x,this.y-q.y);  
                },
                multipy:function(scale){
                    return new Vector(this.x*scale,this.y*scale);  
                },
                normalize:function(length){
                    if(length === undefined){
                        length = 1;
                    }
                    return this.multipy(length / this.length());
                }
            };
            Vector.fromPoints = function(p1,p2){
                return new Vector(p2.x - p1.x, p2.y - p1.y);
            };
            window.Vector = Vector;
        })();
index.html



    
    svg动画
    


    
        
    
    
    
    


3.图案动画




  
  图案处理/title>
  <style>
    html, body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          background: #001122;
          line-height: 0;
          font-size: 0;
        }
    </style>
</head>
<body>
  <svg id="svg" width="100%" height="100%" viewBox="-400 -300 800 600" preserveAspectRatio="xMidYMid 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="moon-group">
      <mask id="moon-mask">
        <circle cx="-250" cy="-150" r="100" fill="white"></circle>
        <circle cx="-200" cy="-200" r="100" fill="black"></circle>
      </mask>
      <circle cx="-250" cy="-150" r="100" fill="white" mask="url(#moon-mask)"></circle>
    </g>
    <g id="light-tower" transform="translate(250,0)">
      <defs>
        <linearGradient id="tower" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stop-color="#999"></stop>
          <stop offset="1" stop-color="#333"></stop>
        </linearGradient>
        <radialGradient id="light" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stop-color="rgba(255,255,255,.8)"></stop>
          <stop offset="1" stop-color="rgba(255,255,255,0)"></stop>
        </radialGradient>
        <clipPath id="light-mask">
          <polygon points="0 0 -400 -15 -400 15" fill="rgba(255,0,0,0.5)">
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="7s" repeatCount="indefinite"></animateTransform>
          </polygon>
          <circle cx="0" cy="0" r="2"></circle>
        </clipPath>
      </defs>
      <polygon points="0 0 5 50 -5 50" fill="url(#tower)"></polygon>
      <ellipse cx="0" cy="0" rx="300" ry="100" fill="url(#light)" clip-path="url(#light-mask)"></ellipse>
      
    </g>
  </svg>


  <script>
      
    var paper = document.getElementById("svg");
    var SVG_NS = "http://www.w3.org/2000/svg";
    var XLINK_NS = "http://www.w3.org/1999/xlink";
    
    renderStar();
    
    function use(origin) {
      var _use = document.createElementNS(SVG_NS, "use");
      _use.setAttributeNS(XLINK_NS, "xlink:href", "#" + origin.id);
      return _use;
    }
    
    function random (min, max) {
      return min + (max - min) * Math.random();
    }
    
    function renderStar() {
      var starRef = document.getElementById("star");
      var starGroup = document.getElementById("star-group");
      var starCount = 500;
      while(starCount--){
        star = use(starRef);
        star.setAttribute("opacity", random(0.1, 0.4));
        star.setAttribute("transform", "translate(" + random(-400, 400) + "," + random(-300, 50) + ")" + " scale(" + random(0.1, 0.6) + ")");
        starGroup.appendChild(star);
      }
    }
  </script>
</body>
</html></pre>
<p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000019115973");</script></p>
<p><b>这篇是对慕、课、网svg教程的笔记,链接贴在下面,大家可以去看看:</b></p>
<p>走进SVG:https://www.imooc.com/learn/143</p>           
               
                                           
                       
                 </div>
            
                     <div class="mt-64 tags-seach" >
                 <div class="tags-info">
                                                                                                                    
                         <a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo">云服务器</a>
                                             
                         <a style="width:120px;" title="GPU云服务器" href="https://www.ucloud.cn/site/product/gpu.html">GPU云服务器</a>
                                                                                                                                                 
                                      
                     
                    
                                                                                               <a style="width:120px;" title="html5新特性之webrtc" href="https://www.ucloud.cn/yun/tag/html5xintexingzhiwebrtc/">html5新特性之webrtc</a>
                                                                                                           <a style="width:120px;" title="SVG" href="https://www.ucloud.cn/yun/tag/SVG/">SVG</a>
                                                                                                           <a style="width:120px;" title="_svg" href="https://www.ucloud.cn/yun/tag/_svg/">_svg</a>
                                                                                                           <a style="width:120px;" title="svg过渡" href="https://www.ucloud.cn/yun/tag/svgguodu/">svg过渡</a>
                                                         
                 </div>
               
              </div>
             
               <div class="entry-copyright mb-30">
                   <p class="mb-15"> 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。</p>
                 
                   <p>转载请注明本文地址:https://www.ucloud.cn/yun/109381.html</p>
               </div>
                      
               <ul class="pre-next-page">
                 
                                  <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/109380.html">上一篇:基于 Github API 的图床 Chrome 插件开发全纪录</a></li>  
                                                
                                       <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/109382.html">下一篇:html5之canvas</a></li>
                                  </ul>
              </div>
              <div class="about_topicone-mid">
                <h3 class="top-com-title mb-0"><span data-id="0">相关文章</span></h3>
                <ul class="com_white-left-mid atricle-list-box">
                             
                                                                                        
                </ul>
              </div>
              
               <div class="topicone-box-wangeditor">
                  
                  <h3 class="top-com-title mb-64"><span>发表评论</span></h3>
                   <div class="xcp-publish-main flex_box_zd">
                                      
                      <div class="unlogin-pinglun-box">
                        <a href="javascript:login()" class="grad">登陆后可评论</a>
                      </div>                   </div>
               </div>
              <div class="site-box-content">
                <div class="site-content-title">
                  <h3 class="top-com-title mb-64"><span>0条评论</span></h3>   
                </div> 
                      <div class="pages"></ul></div>
              </div>
           </div>
           <div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right">
              <div class=""> 
                <div class="com_layuiright-box user-msgbox">
                    <a href="https://www.ucloud.cn/yun/u-901.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/09/small_000000901.jpg" alt=""></a>
                    <h3><a href="https://www.ucloud.cn/yun/u-901.html" rel="nofollow">Salamander</a></h3>
                    <h6>男<span>|</span>高级讲师</h6>
                    <div class="flex_box_zd user-msgbox-atten">
                     
                                                                      <a href="javascript:attentto_user(901)" id="attenttouser_901" class="grad follow-btn notfollow attention">我要关注</a>
      
                                                                                        <a href="javascript:login()" title="发私信" >我要私信</a>
                     
                                            
                    </div>
                    <div class="user-msgbox-list flex_box_zd">
                          <h3 class="hpf">TA的文章</h3>
                          <a href="https://www.ucloud.cn/yun/ut-901.html" class="box_hxjz">阅读更多</a>
                    </div>
                      <ul class="user-msgbox-ul">
                                                  <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/130952.html">tensorflow安装pandas</a></h3>
                            <p>阅读 2795<span>·</span>2023-04-26 02:23</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/123047.html">程序员自制游戏:超级玛丽100%真实版,能把你玩哭了~【附源码】</a></h3>
                            <p>阅读 1469<span>·</span>2021-11-11 16:55</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/122645.html">美国政府:今年发生了三起针对水处理厂的勒索软件攻击</a></h3>
                            <p>阅读 3097<span>·</span>2021-10-19 11:47</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/120362.html">主机邦定域名什么意思-绑定域名是什么意思?</a></h3>
                            <p>阅读 3225<span>·</span>2021-09-22 15:15</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117256.html">前端基础入门三(CSS总结篇——思维导图)</a></h3>
                            <p>阅读 1920<span>·</span>2019-08-30 15:55</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/113509.html">写给 Android 开发的小程序布局指南,Flex 布局!</a></h3>
                            <p>阅读 982<span>·</span>2019-08-29 15:43</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112488.html">前端开发者指南(2017)</a></h3>
                            <p>阅读 1238<span>·</span>2019-08-29 13:16</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112035.html">HTML+CSS复习之CSS基础篇</a></h3>
                            <p>阅读 2084<span>·</span>2019-08-29 12:38</p></li>
                                                
                      </ul>
                </div>

                   <!-- 文章详情右侧广告-->
              
  <div class="com_layuiright-box">
                  <h6 class="top-com-title"><span>最新活动</span></h6> 
           
         <div class="com_adbox">
                    <div class="layui-carousel" id="right-item">
                      <div carousel-item>
                                                                                                                       <div>
                          <a href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服务器">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/gpu.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服务器">                                 
                          </a>
                        </div>
                                                                   
                    
                        
                      </div>
                    </div>
                      
                    </div>                    <!-- banner结束 -->
              
<div class="adhtml">

</div>
                <script>
                $(function(){
                    $.ajax({
                        type: "GET",
                                url:"https://www.ucloud.cn/yun/ad/getad/1.html",
                                cache: false,
                                success: function(text){
                                  $(".adhtml").html(text);
                                }
                        });
                    })
                </script>                </div>              </div>
           </div>
        </div>
      </div> 
    </section>
    <!-- wap拉出按钮 -->
     <div class="site-tree-mobile layui-hide">
      <i class="layui-icon layui-icon-spread-left"></i>
    </div>
    <!-- wap遮罩层 -->
    <div class="site-mobile-shade"></div>
    
       <!--付费阅读 -->
       <div id="payread">
         <div class="layui-form-item">阅读需要支付1元查看</div>  
         <div class="layui-form-item"><button class="btn-right">支付并查看</button></div>     
       </div>
      <script>
      var prei=0;

       
       $(".site-seo-depict pre").each(function(){
          var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">','');
          $(this).attr('data-clipboard-text',html).attr("id","pre"+prei);
          $(this).html("").append("<code>"+html+"</code>");
         prei++;
       })
           $(".site-seo-depict img").each(function(){
             
            if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){
                $(this).remove();
            }
       })
     $("LINK[href*='style-49037e4d27.css']").remove();
       $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove();
layui.use(['jquery', 'layer','code'], function(){
  $("pre").attr("class","layui-code");
      $("pre").attr("lay-title","");
       $("pre").attr("lay-skin","");
  layui.code(); 
       $(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)");
      
});
function copycode(target){
    var id=$(target).parent().parent().attr("id");
  
                  var clipboard = new ClipboardJS("#"+id);

clipboard.on('success', function(e) {


    e.clearSelection();
    alert("复制成功")
});

clipboard.on('error', function(e) {
    alert("复制失败")
});
}
//$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5));
</script>
  <link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css">
    <script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script>
    <script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

<script>
    function setcode(){
        var _html='';
    	  document.querySelectorAll('pre code').forEach((block) => {
        	  var _tmptext=$.trim($(block).text());
        	  if(_tmptext!=''){
        		  _html=_html+_tmptext;
        		  console.log(_html);
        	  }
    		 
    		  
    		 
      	  });
    	 

    }

</script>

<script>
function payread(){
  layer.open({
      type: 1,
      title:"付费阅读",
      shadeClose: true,
      content: $('#payread')
    });
}
// 举报
function jupao_tip(){
  layer.open({
      type: 1,
      title:false,
      shadeClose: true,
      content: $('#jubao')
    });

}
$(".getcommentlist").click(function(){
var _id=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
$("#articlecommentlist"+_id).toggleClass("hide");
var flag=$("#articlecommentlist"+_id).attr("dataflag");
if(flag==1){
flag=0;
}else{
flag=1;
//加载评论
loadarticlecommentlist(_id,_tid);
}
$("#articlecommentlist"+_id).attr("dataflag",flag);

})
$(".add-comment-btn").click(function(){
var _id=$(this).attr("dataid");
$(".formcomment"+_id).toggleClass("hide");
})
$(".btn-sendartcomment").click(function(){
var _aid=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
var _content=$.trim($(".commenttext"+_aid).val());
if(_content==''){
alert("评论内容不能为空");
return false;
}
var touid=$("#btnsendcomment"+_aid).attr("touid");
if(touid==null){
touid=0;
}
addarticlecomment(_tid,_aid,_content,touid);
})
 $(".button_agree").click(function(){
 var supportobj = $(this);
         var tid = $(this).attr("id");
         $.ajax({
         type: "GET",
                 url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid,
                 cache: false,
                 success: function(hassupport){
                 if (hassupport != '1'){






                         $.ajax({
                         type: "GET",
                                 cache:false,
                                 url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid,
                                 success: function(comments) {

                                 supportobj.find("span").html(comments+"人赞");
                                 }
                         });
                 }else{
                	 alert("您已经赞过");
                 }
                 }
         });
 });
 function attenquestion(_tid,_rs){
    	$.ajax({
    //提交数据的类型 POST GET
    type:"POST",
    //提交的网址
    url:"https://www.ucloud.cn/yun/favorite/topicadd.html",
    //提交的数据
    data:{tid:_tid,rs:_rs},
    //返回数据的格式
    datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
    //在请求之前调用的函数
    beforeSend:function(){},
    //成功返回之后调用的函数
    success:function(data){
    	var data=eval("("+data+")");
    	console.log(data)
       if(data.code==2000){
    	layer.msg(data.msg,function(){
    	  if(data.rs==1){
    	      //取消收藏
    	      $(".layui-layer-tips").attr("data-tips","收藏文章");
    	      $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>');
    	  }
    	   if(data.rs==0){
    	      //收藏成功
    	      $(".layui-layer-tips").attr("data-tips","已收藏文章");
    	      $(".layui-layer-tips").html('<i class="fa fa-heart"></i>')
    	  }
    	})
    	 
       }else{
    	layer.msg(data.msg)
       }


    }   ,
    //调用执行后调用的函数
    complete: function(XMLHttpRequest, textStatus){
     	postadopt=true;
    },
    //调用出错执行的函数
    error: function(){
        //请求出错处理
    	postadopt=false;
    }
 });
}
</script>
<footer>
        <div class="layui-container">
            <div class="flex_box_zd">
              <div class="left-footer">
                    <h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud (优刻得科技股份有限公司)"></a></h6>
                    <p>UCloud (优刻得科技股份有限公司)是中立、安全的云计算服务平台,坚持中立,不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品,并深入了解互联网、传统企业在不同场景下的业务需求,提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p>
              </div>
              <div class="right-footer layui-hidemd">
                  <ul class="flex_box_zd">
                      <li>
                        <h6>UCloud与云服务</h6>
                         <p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p>
                         <p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p>
                         <p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p>
                         <p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p>                                                  <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p>
                      </li>
                      <li>
                        <h6>友情链接</h6>                                             <p><a href="https://www.compshare.cn/?ytag=seo">GPU算力平台</a></p>                                             <p><a href="https://www.ucloudstack.com/?ytag=seo">UCloud私有云</a></p>
                                             <p><a href="https://www.surfercloud.com/">SurferCloud</a></p>                                             <p><a href="https://www.uwin-link.com/">工厂仿真软件</a></p>                                             <p><a href="https://pinex.it/">Pinex</a></p>                                             <p><a href="https://www.picpik.ai/zh">AI绘画</a></p>
                                             
                      </li>
                      <li>
                        <h6>社区栏目</h6>
                         <p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p>
                     <p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p>                      </li>
                      <li>
                        <h6>常见问题</h6>
                         <p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p>
                         <p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p>
                         <p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p>                                                  <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p>                                                
                         <p><a href="https://www.ucloud.cn/site/notice/">公告</a></p>
                      </li>
                      <li>
                          <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span>
                          <p>扫扫了解更多</p></div>
            </div>
            <div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>|</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>|</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>|</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-DZSMXQ3P9N');
</script>
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script></div> 
        </div>
    </footer>
</body>
<script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script>
<<script type="text/javascript">
$(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%");
</script>
</html>