<!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>

[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. （转）JS模块化编程之AMD规范

    模块的规范 原文地址 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有 ...

  2. 学习ng2，从zonejs开始（非官方翻译） ----angular2系列（一)

    Zone是什么: 官方解释:zone.js为JavaScript提供了执行上下文,可以在异步任务之间进行持久性传递. 最开始我一直没理解到这句话,学习过程中我也因为自己的一些失误而一直纠结徘徊,情况是 ...

  3. Java开发中的高频Collections用法总结与Java平台实现源代码查看方式

    一生二,二生三,三生万物,基础永远是一个计算机人的立身之本,相信看到这篇文章的人一般都知道数据结构这门课程,要不也不会找到我的这篇文章.数据结构这门课程的分析奠定了工程师对各种平台中的容器类,集合类的 ...

  4. Windows Azure Service Bus (6) 中继(Relay On) 使用VS2013开发Service Bus Relay On

    <Windows Azure Platform 系列文章目录> 注意:本文介绍的是国内由世纪互联运维的Windows Azure服务. 项目文件请在这里下载. 我们在使用Azure平台的时 ...

  5. 使用.NET 4.0+ 操作64位系统中的注册表

    一.64位系统中的注册表 以 LocalMachine 中的启动项为例: 64位应用的注册表位置还是在: SOFTWARE\Microsoft\Windows\CurrentVersion\Run 而 ...

  6. .NET中类(class)与结构(struct)

    结构是值类型:值类型在栈上分配空间:  类是引用类型:引用类型在堆栈上分配空间:  虽然结构与类的类型不一样,可是他们的基类型都是对象(object),c#中所有类型的基类型都是object:  虽然 ...

  7. Asp.net Session 与Cookie的应用

    写程序的很多人都知道的,Session是服务器端的东西而Cooike是客户端的东西.因为B/S模式是无状态模式,它们的应用都是要存储客户端的某些登录或是加密的信息. Session存在于服务器端,当然 ...

  8. 【C#进阶系列】14 字符、字符串和文本编码

    本来写了蛮多的,结果因为重启了一下机器导致写的东西都没了. 然后再回想之前写了什么,反而更像是把知识提炼了一番. 关于字符 字符什么的只要记住.net里面都用的Unicode编码就好.字符和数字之间转 ...

  9. No.014：Longest Common Prefix

    问题: Write a function to find the longest common prefix string amongst an array of strings. 官方难度: Eas ...

  10. AspectJ对AOP的实现

    一:你应该明白的知识 1.对于AOP这种编程思想,很多框架都进行了实现.Spring就是其中之一,可以完成面向切面编程.然而,AspectJ也实现了AOP的功能,且实现方式更为简捷,使用更加方便,而且 ...