SVG——可扩展适量图形，基于XML

PC端：IE9+   wap端：表现良好，适合使用

基础图形：

line（线段）  <line x1="25" y1="150" x2="375" y2="50" stroke="#f00"></line>

polyline（折线） <polyline points="250 75,350 100,100 0" stroke="#1A9EF2" fill="none"></polyline>

circle（圆）   <circle cx="135" cy="35" r="20" style="stroke: none;fill: #ddd;"></circle>

rect（矩形）   <rect x="10" y="10" rx="10" ry="10" width="50" height="60" style="stroke: #ccc;fill:#add;"></rect>

polygon（多边形） <polygon points="400 400,450 480,600,100,550 80"></polygon>

ellipse（椭圆）  <ellipse cx="200" cy="500" rx="72" ry="45"></ellipse>

组标签：

<g fill="dodgerblue">

<rect x="510" y="10" width="40" height="40" ry="10"/>

<rect x="610" y="80" width="40" height="40" ry="10" />

<rect x="710" y="150" width="40" height="40" ry="10" />

</g>

a链：

<a xlink:href="http://sina.com.cn" target="_blank">

<text x="10" y="130" style="fill: red;">Hello World!!</text>

</a>

路径标签：（M——移动 L——线段 H——水平线段  V——垂直线段  A——圆弧  C——三次贝塞尔曲线   S——特殊版本的三次贝塞尔曲线   Q——二次贝塞尔曲线    T——特殊版本的二次贝塞尔曲线   Z——闭合）

<path d="M 60 0 L 120 0 L 180 60 L180 120 L120 180 L 60 180 L 0 120 L 0 60" transform="translate(500,500)"></path>

svg嵌入页面的方式：img、background、iframe、embed、object、直接使用svg标签嵌入

svg生成工具软件：Adobe Illustrator、SVGDeveloper

path的两个css属性：

stroke-dasharray     /*两个参数：线段长度 线段缝隙*/

stroke-dashoffset  /*从哪个位置开始渲染线段*/

获取path长度的js api：  getTotalLength方法

通过改变path的两个属性，实现一个动画的效果：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  6.     <title>路径描边动画2</title>
  7.     <style>
  8.         path:first-child{
  9.             stroke-dasharray: 1089.82;/*两个参数：线段长度 线段缝隙*/
  10.             stroke-dashoffset: 1089.82; /*从哪个位置开始渲染线段*/
  11.         }
  12.         path:last-child{
  13.             stroke-dasharray: 1288.02;
  14.             stroke-dashoffset: 1288.02;
  15.         }
  16.         path{
  17.             animation: dash 5s linear infinite;
  18.         }
  19.         @keyframes dash {
  20.             to{
  21.                 stroke-dashoffset: 0;
  22.             }
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg">
  28.         <path d="M 58 88 C 60.99994 87.33333 71.5 84.66666 76 84 C 80.49994 83.33333 82.16663 84.16666 85 84 C 87.83331 83.83333 89 80.16666 93 83 C 96.99994 85.83333 105.6666 92.83333 109 101 C 112.3333 109.1667 116.9999 124.8333 113 132 C 109 139.1667 93.66663 138.6667 85 144 C 76.33331 149.3333 61.99994 160.5 61 164 C 60 167.5 72.16663 165.6667 79 165 C 85.83331 164.3333 94.66663 156.3333 102 160 C 109.3333 163.6667 121.1666 175.6667 123 187 C 124.8333 198.3333 118.6666 216.1667 113 228 C 107.3333 239.8333 92.33331 253.8333 89 258 C 85.66663 262.1667 94.99994 257.3333 93 253 C 91 248.6667 81.83331 239.3333 77 232 C 72.16663 224.6667 55.66663 222.5 64 209 C 72.33331 195.5 103.8333 164 127 151 C 150.1666 138 193.1666 138.6667 203 131 C 212.8333 123.3333 191.9999 112.6667 186 105 C 180 97.33333 171.3333 75.83333 167 85 C 162.6666 94.16666 163.4999 133.8333 160 160 C 156.5 186.1667 144.8333 238.3333 146 242 C 147.1666 245.6667 159.5 199.3333 167 182 C 174.4999 164.6667 189.1666 146.8333 191 138 C 192.8333 129.1667 182.6666 130.5 178 129 C 173.3333 127.5 158.1666 118.8333 163 129 C 167.8333 139.1667 187.6666 171.6667 207 190 C 226.3333 208.3333 267 230.8333 279 239 " fill="#FFFFFF" stroke="#000000"  />
  29.         <path d="M 430 64 C 432.4999 67.33333 440 76.83333 445 84 C 449.9999 91.16666 464.9999 101.6667 460 107 C 455 112.3333 430.4999 113.6667 415 116 C 399.5 118.3333 373.3333 120.1667 367 121 C 360.6666 121.8333 361.6666 123 377 121 C 392.3333 119 432.3333 113.8333 459 109 C 485.6666 104.1667 529.6666 92.49998 537 92 C 544.3333 91.5 514.4999 99.16666 503 106 C 491.5 112.8333 473.8333 124.3333 468 133 C 462.1666 141.6667 466.8333 156.3333 468 158 C 469.1666 159.6667 474.5 146.5 475 143 C 475.4999 139.5 477.8333 135.8333 471 137 C 464.1666 138.1667 446.8333 142.5 434 150 C 421.1666 157.5 400.4999 173.1667 394 182 C 387.5 190.8333 394.6666 196.6667 395 203 C 395.3333 209.3333 396.6666 212 396 220 C 395.3333 228 392.6666 246.5 391 251 C 389.3333 255.5 379.5 257.5 386 247 C 392.4999 236.5 402.3333 202.1667 430 188 C 457.6666 173.8333 541 164.1667 552 162 C 562.9999 159.8333 511.1666 171.3333 496 175 C 480.8333 178.6667 466.8333 177.3333 461 184 C 455.1666 190.6667 462.3333 205.3333 461 215 C 459.6666 224.6667 454.6666 238.8333 453 242 C 451.3333 245.1667 448.6666 240.5 451 234 C 453.3333 227.5 458.5 212.3333 467 203 C 475.4999 193.6667 493.6666 177 502 178 C 510.3333 179 512.6666 197.8333 517 209 C 521.3333 220.1667 520 242.5 528 245 C 535.9999 247.5 552.1666 232 565 224 C 577.8333 216 600.1666 206 605 197 C 609.8333 188 595.8333 174.5 594 170 " fill="#FFFFFF" stroke="#000000" />
  30.     </svg>
  31.  
  32.     <script>
  33.         var paths = document.querySelectorAll('path'),path0=paths[0],path1=paths[1];
  34.         var path0Len=path0.getTotalLength(),path1Len=path1.getTotalLength();
  35.         console.log(path0Len+';'+path1Len)
  36.     </script>
  37. </body>
  38. </html>

svg学习笔记（一）的更多相关文章

  1. 8. svg学习笔记-文本

    毫无疑问,文本也是svg中组成的重要部分,在svg中,用<text>元素来创建文本,文本的使用格式如下: <text x="20" y="30" ...

  2. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  3. 2. svg学习笔记-svg中的坐标系统和viewbox

    我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...

  4. svg的基本图形与属性【小尾巴的svg学习笔记1】

    因为项目有可能用到, 所以学习了一下,做此笔记,图截自慕课网,侵删. 一.基本图形 1.矩形 x,y定义矩形的左上角坐标: width,height定义矩形的长度和宽度: rx,ry定义矩形的圆角半径 ...

  5. svg学习笔记（二）

    SMIL animation演示代码集锦 <svg width="1400" height="1600" xmlns="http://www.w ...

  6. svg学习笔记

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. 9. svg学习笔记-裁剪和蒙版

    裁剪 在svg中进行剪切,对整个svg元素而言,可以使用<svg>元素的viewbox属性,对于单个元素则可以使用<clipPath>元素.在单个图形元素上使用裁剪,可以在&l ...

  8. 7. svg学习笔记-图案和渐变

    之前,我们仅仅使用纯色来为图形填充颜色和绘制轮廓,除此之外,我们还可以使用图案和渐变来填充图形或者是绘制轮廓. 图案 图案的效果类似于,在网页中给一个元素指定背景图像,当背景图像的尺寸小于元素的尺寸的 ...

  9. 6. svg学习笔记-路径

    路径相比于多边形<polygon>元素具有更强绘图能力,<polygon>元素可以绘制任意的多边形,而路径可以绘制任意的轮廓线,是线段,曲线,圆弧的组合形式.svg中可以使用& ...

随机推荐

  1. nonce和timestamp在Http安全协议中的作用

    前段时间给客户网站做新浪微博账号登录功能,对OAuth协议以及相关的一些安全协议做了一些研究,顺便就记录一下学习心得吧.在这里就不打算具体讲OAuth的协议流程了,而是针对OAuth请求头里的nonc ...

  2. zookeeper配置同步zookeeper编程

    分布式助手Zookeeper(四) kissyoudyb 2013-12-05 17:41 阅读:33 评论:0     分布式助手Zookeeper(三) kissyoudyb 2013-12-05 ...

  3. 区域医疗移动医疗影像解决方案2--基于FLEX的PACS

    基于Flex的PACS和基于HTML5的PACS,都不是基于DICOM的WADO的方式,即所有的图像操作,移动.缩放.旋转.测量.伪彩.窗宽窗位调整等都是在本地浏览器能够完成,不用和服务器进行频繁的交 ...

  4. iOS开发——MVC详解&Swift＋OC

    MVC 设计模式 这两天认真研究了一下MVC设计模式,在iOS开发中这个算是重点中的重点了,如果对MVC模式不理解或者说不会用,那么你iOS肯定学不好,或者写不出好的东西,当然本人目前也在学习中,不过 ...

  5. 解决Windows2008Server上PLSQL登录时报ORA-12557

    公司的Oracle服务端是安装在一台Linux服务器上,版本号为11.1.0.7.0.我们开发的系统部署在Windows 2008 Server(x64),因为偶尔需要调用Oracle数据库,所以最开 ...

  6. maven系列之二maven项目的创建和maven项目的结构

    maven系列之一简单介绍了maven的基本信息,安装和配置,大家对maven有一个大概的了解,但是在maven项目开发中远远不够,为了进一步了解maven,现在我们介绍maven项目的创建和mave ...

  7. C# 之 Word光标移动 GoTo 方法

    对于 Document 或 Range对象:返回一个 Range对象,该对象代表指定项(例如页.书签或域)的开始位置. 对于 Selection对象:将插入点移至指定项前面的字符位置,并返回一个 Ra ...

  8. marine

  9. Web安全测试周末公开班计划5月24、25日开课，欢迎报名参加！

    Web安全测试周末公开班计划5月24.25日开课,欢迎报名参加! 课程大纲参考: http://gdtesting.com/product.php?id=107 报名咨询: 黎小姐 QQ:241448 ...

  10. C++第四章循环

    学习时候的点: 1.用户来控制是否继续进行的模板: char goonLoop=’y’; while(goonLoop==’y’){ //logic cout<<”输入y 来继续当前逻辑, ...