1.  <!DOCTYPE html>
  2.  <html lang='zh-cn'>
  3.  <head>
  4.  <title>Insert you title</title>
  5.  <meta name='description' content='this is my page'>
  6.  <meta name='keywords' content='keyword1,keyword2,keyword3'>
  7.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  8.  <link rel='stylesheet' type='text/css' href='./css/index.css' />
  9.  <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
  10.  <style type='text/css'>
  11.  html,body,div,svg {
  12.      margin: 0; padding: 0;
  13.  }
  14.  
  15.  #wrap {
  16.      width: 500px; height: 450px; border: 1px solid #999; border-radius: 2px; margin: 25px auto;
  17.  }
  18.  
  19.  svg {
  20.      height: 100%; width: 100%;
  21.      /* 在谷歌浏览器中如果不指定svg的大小,那么使用默认的300*150大小(将焦点放置在调控台{Element}中的标签上可以检查),但是在火狐中表现却不同
  22.      即使我们不指定svg的大小,指定父元素的大小,那么svg的大小将继承父元素;
  23.       */
  24.  }
  25.  </style>
  26.  <script type='text/javascript'>
  27.      $( function(){
  28.  
  29.      } );
  30.  </script>
  31.  </head>
  32.  <body>
  33.      <div id='wrap'>
  34.          <svg xmlns='http://www.w3.org/2000/svg' version='1.1'>
  35.           <polyline points='20 25 ,70 65 ,150 300, 15 400' fill=' transparent ' stroke='#C7F309' stroke-width='3' ></polyline>
  36.           <!-- 参数解析 points 点的坐标 每两个算是一组 组与组之间可以使用逗号做间隔,也可以不使用 直接与空格相隔开 默认有填充  如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent
  37.                                  是透明, 勾勒描边为无 style = "fill:#09F3C7 ;stroke:#C7F309;" stroke-opacity = '.3' fill-opacity = '.9'-->
  38.            <polygon points='320 25 90 75 ,150 250, 30 225'  fill=' transparent ' stroke='#C7F309' stroke-width='3' ></polygon>
  39.            <!-- 参数解析 points 点的坐标 每两个算是一组 组与组之间可以使用逗号做间隔,也可以不使用 直接与空格相隔开 默认有填充  如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent
  40.                                  是透明, 勾勒描边为无 style = "fill:#09F3C7 ;stroke:#C7F309;" stroke-opacity = '.3' fill-opacity = '.9'-->
  41.                                  <!-- polyline : 译为折线  polygon 译为多边形 折现的交换点在线段末尾的中心点(将绘制的线段放大可以观察到)并且在闭合路径(将结束点设置为起始点 )的时候会出现问题
  42.                                  多边形具有自动闭合的左右,可以实现完美闭合并且不用将结束点设置为起始点  -->
  43.          </svg>
  44.      </div>
  45.  </body>
  46.  </html>

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

  1. [javascript svg fill stroke stroke-width points polyline 属性讲解] svg fill stroke stroke-width points polyline 绘制折线属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  2. [javascript svg fill stroke stroke-width x1 y1 x2 y2 line stroke-opacity fill-opacity 属性讲解] svg fill stroke stroke-width stroke-opacity fill-opacity line绘制线条属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  3. [javascript svg fill stroke stroke-width x y rect rx ry 属性讲解] svg fill stroke stroke-width rect 绘制具有圆角矩形属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  4. [javascript svg fill stroke stroke-width rx ry ellipse 属性讲解] svg fill stroke stroke-width ellipse 绘制椭圆属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  5. [javascript svg fill stroke stroke-width circle 属性讲解] svg fill stroke stroke-width circle 属性 绘制圆形及引入方式讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  6. svg web拓扑更新了，支持动态添加svg组件

    版本1.0请点此 预览地址 https://svg.yaolunmao.top 如何使用 # 克隆项目 git clone https://github.com/yaolunmao/vue-webto ...

  7. Leaflet：Path、Polyline、Polygon、Rectangle、Circle、CircleMarker

    下边介绍Vector Layer Path(Layer) Path是其他Vector Layer的父类,比如Polyline.Polygon.Rectangle.Circle.CircleMarker ...

  8. 【Silverlight】Bing Maps学习系列（五）：绘制多边形（Polygon）图形（转）

    [Silverlight]Bing Maps学习系列(五):绘制多边形(Polygon)图形 Bing Maps Silverlight Control支持用户自定义绘制多边形(Polygon)图形, ...

  9. JavaScript+canvas 绘制多边形

    效果图: <body> <canvas id="square" width="500"></canvas> <canv ...

随机推荐

  1. Android基于mAppWidget实现手绘地图（七）–根据坐标添加地图对象

    为了将地图对象放置到某个特殊的地理位置上,你需要: 1. 创建地图对象 2.添加地图对象到图层(任何位置) 3. 移动该地图对象,使用 MapObject.moveTo(Location locati ...

  2. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  3. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  4. Mac下如何配置环境变量

    以前都是在Windows平台上开发,在配置一些框架的时候,为了能够在命令行中调用,一般都会配置bin目录到环境变量中,这是为了让命令行在执行的时候,能够查找到对应的执行文件. 现在工作使用Mac,配置 ...

  5. java设计模式(三)--抽象工厂模式

    转载:http://zz563143188.iteye.com/blog/1847029 前面的工厂方法模式虽然清晰,但还是感觉有些繁琐,通常使用的还是抽象工厂模式. 工厂方法模式有一个问题就是,类的 ...

  6. python一

    一安装工具 pip easy_install import os print (os.getcwd()) 1. 自带package和外部package      1.1 自带package举例: os ...

  7. DP - 2016网易杭研笔试题A

    2016网易杭研笔试题A Problem's Link ------------------------------------------------------------------------ ...

  8. ::selection{}

    ::selectiion{}这是一个伪类选择器,这个是当我们在选择网页上某些文字时(通常是为了复制文字),文字的背景颜色和文字颜色都会发生变化(一般为背景变成蓝色,文字变成白色),这样的写法在IE9及 ...

  9. Dapper学习 - Dapper的基本用法(二) - 存储过程/函数

    上一篇貌似少介绍了自定义函数和存储过程, 因为这两个也可以使用查询的方式来实现功能, 这一篇就补上 一.自定义函数的创建和调用 (mysql的) Delimiter $$ drop function ...

  10. javascript日期验证:填写的日期大于等于当前日期

    <script> $(function () { var d = new Date(); var strDate = getDateStr(d); $("#beginTime&q ...