[javascript svg fill stroke stroke-width points polygon属性讲解] svg fill stroke stroke-width points polygon绘制多边形属性并且演示polyline和polygon区别讲解

时间：2022-11-21 16:27:27
 <!DOCTYPE html>

 <html lang='zh-cn'>

 <head>

 <title>Insert you title</title>

 <meta name='description' content='this is my page'>

 <meta name='keywords' content='keyword1,keyword2,keyword3'>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <link rel='stylesheet' type='text/css' href='./css/index.css' />

 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>

 <style type='text/css'>

 html,body,div,svg {

     margin: 0; padding: 0;

 }

 #wrap {

     width: 500px; height: 450px; border: 1px solid #999; border-radius: 2px; margin: 25px auto;

 }

 svg {

     height: 100%; width: 100%;

     /* 在谷歌浏览器中如果不指定svg的大小,那么使用默认的300*150大小(将焦点放置在调控台{Element}中的标签上可以检查),但是在火狐中表现却不同

     即使我们不指定svg的大小,指定父元素的大小,那么svg的大小将继承父元素;

      */

 }

 </style>

 <script type='text/javascript'>

     $( function(){

     } );

 </script>

 </head>

 <body>

     <div id='wrap'>

         <svg xmlns='http://www.w3.org/2000/svg' version='1.1'>

          <polyline points='20 25 ,70 65 ,150 300, 15 400' fill=' transparent ' stroke='#C7F309' stroke-width='3' ></polyline>

          <!-- 参数解析 points 点的坐标 每两个算是一组 组与组之间可以使用逗号做间隔,也可以不使用 直接与空格相隔开 默认有填充  如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent

                                 是透明, 勾勒描边为无 style = "fill:#09F3C7 ;stroke:#C7F309;" stroke-opacity = '.3' fill-opacity = '.9'-->

           <polygon points='320 25 90 75 ,150 250, 30 225'  fill=' transparent ' stroke='#C7F309' stroke-width='3' ></polygon>

           <!-- 参数解析 points 点的坐标 每两个算是一组 组与组之间可以使用逗号做间隔,也可以不使用 直接与空格相隔开 默认有填充  如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent

                                 是透明, 勾勒描边为无 style = "fill:#09F3C7 ;stroke:#C7F309;" stroke-opacity = '.3' fill-opacity = '.9'-->

                                 <!-- polyline : 译为折线  polygon 译为多边形 折现的交换点在线段末尾的中心点(将绘制的线段放大可以观察到)并且在闭合路径(将结束点设置为起始点 )的时候会出现问题

                                 多边形具有自动闭合的左右,可以实现完美闭合并且不用将结束点设置为起始点  -->

         </svg>

     </div>

 </body>

 </html>

相关文章