从W3school上学习了一下SVG矢量图形，感觉和HTML相比还是有一些新的元素和属性的，一时间不能全部记住，特此留下笔记，供遗忘时作为参考

 <!DOCTYPE html>

 <!-- 在<html>标签中声明SVG的XML方言xmlns:svg="http://www.w3.org/2000/svg" -->

 <html xmlns:svg="http://www.w3.org/2000/svg">

     <head>

         <meta charset="utf-8" />

         <title>SVG学习记录</title>

     </head>

     <body>

         <!-- SVG嵌入HTML的三种方式 -->

         <!-- pluginspage：支持<embed>标签的插件的下载地址 -->

         <embed src="svg/circle_example.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />

         <!-- codebase：支持<object>标签的插件的下载地址 -->

         <object data="svg/circle_example.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/"></object>

         <iframe src="svg/circle_example.svg" width="300" height="100"></iframe>

         <hr />

         <svg width="300" height="100" version="1.1">

             <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

         </svg>

         <hr />

         <p>矩形</p>

         <svg width="100%" height="100%" version="1.1">

             <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>

             <!-- 左距离20，上距离20，宽度150，高度70，填充蓝色，边框粉色，边框5px，填充部分透明度0.1，边框透明度0.9 -->

             <rect x="400" y="20" width="150" height="70" style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/>

         </svg>

         <svg width="100%" height="100%" version="1.1">

             <!-- 定义整个svg的透明度 -->

             <rect x="20" y="20" width="80" height="70" style="fill:blue;stroke:pink;stroke-width:5; opacity:0.6"/>

             <!-- rx,ry：圆角弧度  -->

             <rect x="120" y="20" rx="30" ry="20" width="250" height="50" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/>

         </svg>

         <hr />

         <p>圆形</p>

         <svg width="100%" height="100%" version="1.1">

             <!-- cx,cy：横纵坐标 -->

             <circle cx="100" cy="50" r="40" stroke="black" strok e-width="2" fill="red"/>

             <!-- 椭圆 -->

             <ellipse cx="200" cy="60" rx="20" ry="40" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>

             <!-- 累叠椭圆 -->

             <ellipse cx="540" cy="100" rx="220" ry="30" style="fill:purple"/>

             <ellipse cx="520" cy="70" rx="190" ry="20" style="fill:lime"/>

             <ellipse cx="510" cy="45" rx="170" ry="15" style="fill:yellow"/>

             <!-- 组合椭圆 -->

             <ellipse cx="1040" cy="70" rx="220" ry="30" style="fill:yellow"/>

             <ellipse cx="1020" cy="70" rx="190" ry="20" style="fill:white"/>

         </svg>

         <hr />

         <p>线条</p>

         <svg width="100%" height="100%" version="1.1">

             <!-- x1,y1：开始点横纵坐标，x2,y2：结束点横纵坐标 -->

             <line x1="10" y1="10" x2="300" y2="40" style="stroke:rgb(99,99,99);stroke-width:2"/>

         </svg>

         <hr />

         <p>多边形</p>

         <svg width="100%" height="100%" version="1.1">

             <!-- points：多边形各个点所在位置 -->

             <polygon points="0 10,100 130,150 70" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

             <polygon points="240 5,60 20,160 70,240 70" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

         </svg>

         <hr />

         <p>折线</p>

         <svg width="100%" height="100%" version="1.1">

             <!-- 折线各个转折点 -->

             <polyline points="0,0 0,10 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>

         </svg>

         <hr />

         <p>路径</p>

         <svg width="100%" height="100%" version="1.1">

             <!-- 路径：(100,10) -> (10,100) -> (100,100) -> (100,10) -->

             <path d="M100 10 L10 100 L100 100 Z" />

         </svg>

         <!-- 复杂图形建议使用SVG编辑器来进行绘制 -->

         <svg width="100%" height="500px" version="1.1">

             <path d="M153 334

             C153 334 151 334 151 334

             C151 339 153 344 156 344

             C164 344 171 339 171 334

             C171 322 164 314 156 314

             C142 314 131 322 131 334

             C131 350 142 364 156 364

             C175 364 191 350 191 334

             C191 311 175 294 156 294

             C131 294 111 311 111 334

             C111 361 131 384 156 384

             C186 384 211 361 211 334

             C211 300 186 274 156 274"

             style="fill:white;stroke:red;stroke-width:2"/>

         </svg>

         <hr />

         <p>可用滤镜</p>

         <p>

             <ul>

                 <li>feBlend</li>

                 <li>feColorMatrix</li>

                 <li>feComponentTransfer</li>

                 <li>feComposite</li>

                 <li>feConvolveMatrix</li>

                 <li>feDiffuseLighting</li>

                 <li>feDisplacementMap</li>

                 <li>feFlood</li>

                 <li>feGaussianBlur</li>

                 <li>feImage</li>

                 <li>feMerge</li>

                 <li>feMorphology</li>

                 <li>feOffset</li>

                 <li>feSpecularLighting</li>

                 <li>feTile</li>

                 <li>feTurbulence</li>

                 <li>feDistantLight</li>

                 <li>fePointLight</li>

                 <li>feSpotLight</li>

             </ul>

         </p>

         <hr />

         <p>高斯滤镜</p>

         <svg width="100%" height="100%" version="1.1">

             <defs>

                 <filter id="Gaussian_Blur">

                     <feGaussianBlur in="SourceGraphic" stdDeviation="3" />

                 </filter>

             </defs>

             <ellipse cx="200" cy="70" rx="70" ry="40" style="fill:#ff0000;stroke:#000000; stroke-width:2;filter:url(#Gaussian_Blur)"/>

         </svg>

         <svg width="100%" height="100%" version="1.1">

             <defs>

                 <filter id="Gaussian_Blur">

                     <feGaussianBlur in="SourceGraphic" stdDeviation="20"/><!-- 20 -->

                 </filter>

             </defs>

             <ellipse cx="200" cy="70" rx="70" ry="40" style="fill:#ff0000;stroke:#000000; stroke-width:2;filter:url(#Gaussian_Blur)"/>

         </svg>

         <hr />

         <p>线性渐变</p>

         <svg width="100%" height="100%" version="1.1">

             <defs>

                 <!-- <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称 -->

                 <!-- 水平渐变，x1,y1：渐变开始位置，x2,y2：渐变结束位置 -->

                 <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">

                     <!-- <stop>标签用于规定渐变中每个关键节点的颜色，offset用于标记其位置 -->

                     <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>

                     <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>

                 </linearGradient>

             </defs>

             <ellipse cx="200" cy="70" rx="85" ry="55" style="fill:url(#orange_red)"/>

             <!-- 垂直渐变 -->

             <defs>

                 <linearGradient id="orange-red" x1="0%" y1="0%" x2="0%" y2="100%">

                     <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>

                     <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>

                 </linearGradient>

             </defs>

             <ellipse cx="500" cy="70" rx="85" ry="55" style="fill:url(#orange-red)"/>

         </svg>

         <hr />

         <p>放射渐变</p>

         <svg width="100%" height="100%" version="1.1">

             <defs>

                 <!-- 参考http://www.w3school.com.cn/svg/svg_grad_radial.asp -->

                 <!-- r：个人理解为内圈放射范围 -->

                 <!-- fx,fy：个人理解为内圈中心（即<stop>的offset=0%）所在相对位置 -->

                 <radialGradient id="grey_blue" cx="40%" cy="40%" r="50%" fx="20%" fy="60%">

                     <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0.5"/>

                     <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>

                 </radialGradient>

             </defs>

             <ellipse cx="170" cy="60" rx="100" ry="50" style="fill:url(#grey_blue)"/>

             <defs>

                 <!-- 个人理解 -->

                 <!-- cx,xy：如果点A(fx,fy)为中心，r为该中心点的放射范围，则B(cx,cy)可以表示为点A放射偏移方向的参照点，如果点A与点B位置重合，则表示放射没有偏移方向，即向四周等量放射-->

                 <radialGradient id="grey-blue" cx="50%" cy="50%" r="70%" fx="80%" fy="80%">

                     <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0.5"/>

                     <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>

                 </radialGradient>

             </defs>

             <rect x="500" y="20" width="250" height="100" style="fill:url(#grey-blue);"/>

         </svg>

         <hr />

         <p>动画</p>

         <!-- 参考：http://www.w3school.com.cn/svg/svg_examples.asp -->

         <!-- 淡出效果 -->

         <svg width="100%" height="100%" version="1.1">

             <rect x="20" y="20" width="250" height="250" style="fill:blue">

                 <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />

             </rect>

         <!--</svg>-->

         <!-- 动态改变多个属性 -->

         <!--<svg width="100%" height="100%" version="1.1">-->

             <rect id="rec" x="900" y="100" width="300" height="10" style="fill:lime">

                 <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="900" to="600"/>

                 <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0"/>

                 <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="100"/>

                 <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="10" to="100"/>

                 <animateColor attributeName="fill" attributeType="CSS" from="lime" to="gray" begin="1s" dur="5s" fill="freeze"/>

             </rect>

         </svg>

         <svg width="100%" height="100%" version="1.1">

             <g transform="translate(50,50)">

                 <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24">沿路径平移

                     <animateMotion path="M 0 0 L 50 50" dur="3s" fill="freeze"/>

                 </text>

             </g>

         </svg>

         <svg width="100%" height="100%" version="1.1">

             <g transform="translate(100,100)">

                 <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:22; visibility:hidden"> 平移+旋转+缩放

                     <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze"/>

                     <animateMotion path="M 0 0 L 100 30" begin="1s" dur="5s" fill="freeze"/>

                     <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze"/>

                     <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze"/>

                 </text>

             </g>

         </svg>

         <p>SVG元素属性参考手册： <a href="http://www.w3school.com.cn/svg/svg_reference.asp">参考W3School描述</a></p>

     </body>

 </html>

SVG矢量图学习实例的更多相关文章

  1. Android中使用SVG矢量图（一）

    SVG矢量图介绍 首先要解释下什么是矢量图像,什么是位图图像? 1.矢量图像:SVG (Scalable Vector Graphics, 可伸缩矢量图形) 是W3C 推出的一种开放标准的文本式矢量图 ...

  2. Android 使用 SVG 矢量图

    android svg矢量图 可能包含的操作有: SVG图还包括改变颜色,透明度,大小,矩阵操作(平移.旋转.缩放),selector, (图标,背景,按钮),动画,等 setTint(int Col ...

  3. Perl+OpenGL 重绘inkscape生成的svg矢量图

    Perl+OpenGL 重绘inkscape生成的svg矢量图 还不够完善,先挖个坑,后面慢慢填 Code: [全选] [展开/收缩] [Download] (Untitled.pl) =info A ...

  4. svg矢量图绘制以及转换为Android可用的VectorDrawable资源

    项目需要 要在快速设置面板里显示一个VoWiFi图标(为了能够区分出来图形,我把透明的背景填充为黑色了) 由于普通图片放大后容易失真,这里我们最好用矢量图(SVG(Scalable Vector Gr ...

  5. svg矢量图

    svg简介 Scalable Vector Graphics 可缩放矢量图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 svg知识点 svg如何绘图 svg和cnavas区别 svg ...

  6. svg矢量图在flex布局中样式扭曲的问题

    问题机型 小米5 华为nova 其他未知的可能机型 问题描述 利用flex 布局的一行中, 左一样式: -webkit-box-flex: 0; flex: 0 1 auto; 左二样式: -webk ...

  7. SVG矢量图【转】

    var iconArray=[ //'circle', //实心圆 //'rect', //矩形 //'roundRect', //圆角矩形 //'triangle', //三角形 //'diamon ...

  8. SVGO: Node.js 开发的 SVG 矢量图优化工具(svg压缩工具）

    SVG图片压缩 这是个通过借助npm包的一种方式去压缩svg的图片,由于阿里的图库自己创建的图标有大小的限制,当我们想要自己用自己的图标的时候就可以使用这种方式去完成对svg的图片压缩. 1.下载no ...

  9. SVG矢量图--爱心

    aixin.xml: <!-- height:width=viewportHeight:viewportWidth --> <vector xmlns:android="h ...

随机推荐

  1. Python二级-----------程序冲刺5

    1. 编写程序,从键盘上获得用户连续输入且用逗号分隔的若干个数字(不必以逗号结尾),计算所有输入数字的和并输出,给出代码提示如下.‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪ ...

  2. Spring boot 入门（四）：集成 Shiro 实现登陆认证和权限管理

    本文是接着上篇博客写的:Spring boot 入门(三):SpringBoot 集成结合 AdminLTE(Freemarker),利用 generate 自动生成代码,利用 DataTable 和 ...

  3. Android应用跳转到微信和支付宝扫一扫

    新版的微信已经把微信功能的schema都禁掉了,意味着我们无法打开微信的扫一扫等功能,目前正常的只能先进入微信(我测试的时候是微信版本7.0.3)已经是很新的版本了 具体调起微信扫一扫代码如下,测试后 ...

  4. MongoDB自学(4)

    超过存储上限或记录条数删除最早的记录:db.createCollection("集合名",{capped:true,size:1024,max:100})注解:指定集合名的最大记录 ...

  5. 【转】Python之道

    作者:Vamei 出处:http://www.cnblogs.com/vamei Python有一个彩蛋,用下面语句调出: import this 该彩蛋的文档记录于PEP 20. 语句执行之后,终端 ...

  6. mstsc远程连接发生身份验证错误要求的函数不受支持

    在win7电脑上使用远程连接连接一台服务器时,出现发生身份验证错误要求的函数不受支持的错误,原因是本地组策略配置错误,如下图: 解决办法: 进入windows命令行模式输入命令: 会弹出本地策略组编辑 ...

  7. VS2017 community版使用码云（gitee）的一些过程，看图学习，傻瓜式教程

    首先你得有一个gitee账号,VS2017IDE开发工具 第一步,打开VS2017,点击菜单栏上->工具->扩展与更新,如图 然后点击 联机 然后输入 gitee 回车搜索 一定要选择我圈 ...

  8. 如何在element-UI 组件的change事件中传递自定义参数

    以select为例,如果select写在循环里,触发change事件时可能不只需要传递被选中项的值,还要传递index过去,来改变同一循环中的其他标签的状态. 下面这样写是无效的: @change=& ...

  9. 【spring源码分析】IOC容器初始化（十二）

    前言:在doCreateBean方法中还遗留一个问题没有分析:循环依赖.循环依赖在Spring中是非常重要的一个知识点,因此单独进行分析. 什么是循环依赖 循环依赖就是循环引用,两个或两个以上的bea ...

  10. Django-CRM项目学习（八）-客户关系系统整体实现（待完成！）

    注意点:利用stark组件与rbac组件实现客户关系系统 1.需求整理与确认 1.1 客户关系系统整体需求 a