什么是SVG?

  Δ  SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

  Δ  SVG 用来定义用于网络的基于矢量的图形

  Δ  SVG使用XML格式来定义图形

  Δ  SVG 是万维网联盟的标准

  Δ  SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体


SVG的优势在于?

  ΔSVG 可被非常多的工具读取和修改(比如记事本)

  ΔSVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。

  ΔSVG 是可伸缩的

  ΔSVG 图像可在任何的分辨率下被高质量地打印  

  ΔSVG 可在图像质量不下降的情况下被放大,修改

  ΔSVG 图像中的文本是可选的,同时也是可搜索的。很适合制作地图!!

  Δ SVG 可以与 Java 技术一起运行

  Δ SVG 是开放的标准

  Δ SVG 是纯粹的XML文本


与flash相比?

  •   SVG 最大的优势是与其他标准(比如 XSL 和 DOM)相兼容。而 Flash 则是未开源的私有技术。

与canvas相比?

  canvas更加原始,是基于像素处理图像 ,而SVG是基于矢量处理图像!

  

  ↑就像画一条直线↑

  Δ  canvas中会记录这条直线的第一个像素到最后一个像素的位置和颜色,它们的排列和数量无法改变;

      SVG中则会记录这条直线的起始位和终点坐标和直线的颜色,更加便于修改!

  Δ  因为canvas是记录型的,所以当你想要缩放图片或对图像进行修改时 ,图片可能会丢失像素,也就是失真。   典型例子:表情包-_-

    SVG就像乐谱,记录的是音律、节奏,不会丢失数据,所以呈现的是高保真的图像!


编辑SVG

  Δ可直接嵌入HTML文件中

  Δ可使用以下标签引入文件

    <embed>|<object>|<iframe>

  Δ<a>标签链接到svg外部文件


  一些基础的图形实现 ↓

SVG <rect>

<rect>标签可创建矩形及其变种。

举个栗子~

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">  //位于"http://www.w3.org/2000/svg"的命名空间
2   <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

SVG <circle>

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

SVG<ellipse>

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50" //rx定义椭圆水平半径,ry定义椭圆垂直半径
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

SVG<line>

  创建一条直线,属性值有x1,x2,定义x轴上的起始和结束,y1,y2,定义y轴上的起始和结束;


SVG<polygon>

  Δ  有一个points属性定义多边形的每个顶点的坐标;

  Δ  有一个fill-rule属性判断一个点是否在图形内,属性值有nonzero|evenodd;


SVG<polyline>

  Δ  创建任何只有直线的形状;

  Δ  有一个points属性,是各个顶点的集合;


SVG<path>

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

  大写表示绝对定位,小写表示相对定位。

  绘制一个三角形↓

 <svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><path d='M350 100 L370 300 L330 300 Z'/></svg>

SVG <text>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red">I love SVG</text>
</svg>

SVG stroke 属性

  • stroke                  //设置一条直线,文本或描边的颜色
  • stroke-width         //设置一条直线,文本或描边的厚度
  • stroke-linecap        //使直线呈现圆角样式
  • stroke-dasharray    //创建虚线

     查看与stroke-dasharray属性相关的实用的效果

  • stroke-linejoin       //描边的转角样式


SVG 模糊效果与滤镜

  所有的滤镜都包含在<defs>元素中,<filter>是向图形应用滤镜的元素

  <feGaussianBlur>元素用于创建模糊效果

  例如:创建一个带有模糊效果的正方形,可以这样写↓

<svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" /> //in属性设置渲染效果的范围
                                   //stdDeviation属性设置图像的模糊程度
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> //filter属性告诉我们要应用哪个滤镜
</svg>

  SVG还包括很多其他效果,这里只介绍到这,大多数看文档就知道了,重点还是要在实践中去摸索其中的技巧。

  看svg你会觉得很简单,但是真正做的时候会出现很多让人不解的结果,why?重点其实在下文↓

  svg似乎与html很像,但是当你刚开始使用Javascript去操作这些元素时会发现那些细微的区别让人很头疼。比如......

1.获取SVGDocument

  当使用javascript操作html文档时,首要的可能就是获取document对象,如果svg代码直接嵌入在html中,它们共用同一个documen对象,此时对他们俩来说没有什么区别。

但是更多时候,你可能是在html文档中用<iframe><object>这种标签来引入svg文件。这种情况下,元素的src属性指向的文件有自己独立的document对象,用操作html元素的方法操作svg的元素已经不再适用。这时可以使用getSVGDocument()操作svg文件中的元素并且修改属性!

2.操作SVG的元素

  SVG的标签结构相较于HTML更加严格,有开始标签就要有结束标签;

  用JS创建SVG的标签时,要使用createElementNS方法来实现,并且它的第一参数必须是SVG的命名空间。就像这样↓

 <svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="20" height="20">
<script type="text/javascript">
var c = document.createElementNS('http://www.w3.org/2000/svg','circle');
c.setAttribute('cx', 10);
c.setAttribute('cy', 10);
c.r.baseVal.value = 7;
c.setAttribute('fill', 'green'); document.rootElement.appendChild(c);
</script>
</svg>

  使用a标签也要在href属性中加入命名空间!

  此外,不同于HTML元素对象可以直接对一些属性赋值,SVG元素对象都需要通过调用setAttribution()方法来设定属性值此外,不同于HTML元素对象可以直接对一些属性赋值,SVG元素对象都需要通过调用setAttribution()方法来设定属性值,这不是唯一方法,但却是更好的方法!

3.坐标变换

  在svg中使用use标签对某种样式属性直接复用,例如效果中经常使用的transform属性,你可以在需要的时候直接使用!

其他的自己摸索吧~

学习SVG 重点汇总的更多相关文章

  1. ref:一系列用于Fuzzing学习的资源汇总

    ref:http://www.freebuf.com/articles/rookie/169413.html 一系列用于Fuzzing学习的资源汇总 secist2018-04-30共185833人围 ...

  2. [转载]机器学习&深度学习经典资料汇总,全到让人震惊

    自学成才秘籍!机器学习&深度学习经典资料汇总 转自:中国大数据: http://www.thebigdata.cn/JiShuBoKe/13299.html [日期:2015-01-27] 来 ...

  3. 【SVG】为了前端页面的美丽,我选择学习SVG

    [SVG]为了前端页面的美丽,我选择学习SVG 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 SVG在之前自学的过程中, ...

  4. VC++/MFC(VC6)开发技术精品学习资料下载汇总

    工欲善其事,必先利其器,VC开发MFC Windows程序,Visual C++或Visual Studio是必须的,恩,这里都给你总结好了,拿去吧:VC/MFC开发必备Visual C++.Visu ...

  5. Dynamic CRM 2013学习笔记 系列汇总

    这里列出所有 Dynamic CRM 2013学习笔记 系列文章,方便大家查阅.有任何建议.意见.需要,欢迎大家提交评论一起讨论. 本文原文地址: Dynamic CRM 2013学习笔记 系列汇总 ...

  6. Dynamic CRM 2015学习笔记 系列汇总

    这里列出所有 Dynamic CRM 2015学习笔记 系列文章,方便大家查阅.有任何建议.意见.需要,欢迎大家提交评论一起讨论. 本文原文地址:Dynamic CRM 2015学习笔记 系列汇总 一 ...

  7. java JDK8 学习笔记——助教学习博客汇总

    java JDK8 学习笔记——助教学习博客汇总 1-6章 (by肖昱) Java学习笔记第一章——Java平台概论 Java学习笔记第二章——从JDK到IDEJava学习笔记第三章——基础语法Jav ...

  8. Oracle学习笔记——点滴汇总

    Oracle学习笔记——点滴汇总 http://www.botangdb.com/ Oracle GI = Grid Infrastructure = ASM + Cluster

  9. 从0开始学习 GitHub 系列汇总笔记

    本文学习自Stromzhang, 原文地址请移步:从0开始学习 GitHub 系列汇总 我的笔记: 0x00  从0开始学习GitHub 系列之[初识GitHub] GitHub 影响力 a.全球顶级 ...

随机推荐

  1. 201521123039 《java程序设计》第十一周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有 ...

  2. 201521123025《java程序设计》第13周学习总结

    1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 从结果来看, ...

  3. linux(CentOS5.8)环境下搭建Radius

    本文记录了freeRadius在CentOS5.8环境下的基本搭建过程,未涉及mysql的加入及配置 freeradius官方地址:http://freeradius.org/ 环境:CentOS5. ...

  4. Markdow使用的简单介绍

    一个例子: 例子开始 1. 本章学习总结 (字体较大,用法:#你要放大的标题) 今天主要学习了三个知识点 封装 继承 多态 用法: - 封装 - 继承 - 多态 2. 书面作业 Q1. java He ...

  5. JVM菜鸟进阶高手之路二(JVM的重要性,Xmn是跟请求量有关。)

    转载请注明原创出处,谢谢! 今天看群聊jvm,通常会问ygc合适吗? 阿飞总结,可能需要2个维度,1.单位时间执行次数,2.执行时间 ps -p pid -o etime 查看下进程的运行时间, 17 ...

  6. call()和apply()的作用

    call( )和apply( )都是为了改变某个函数运行时的上下文而存在的.换句话说是改变函数体内部this的指向 他们的区别就是call()方法接受的是若干个参数的列表,而apply()方法接受的是 ...

  7. js转换字符串为数值的方法

    在js读取文本框或者其他表单数据的时候获得的值是字符串类型的,比如两个文本框a和b,假设获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,由于他们都是字符串形 ...

  8. javascript插入before(),after()新DOM方法

    随着web的技术突飞猛进的发展.HTML5 ES6等新技术的发展,与此同时DOM等标准也在悄悄的进步,各大浏览器也在悄悄的发展适配新的属性和方法,今天我们来看看Javascript新的DOM的方法 二 ...

  9. PyTorch教程之Autograd

    在PyTorch中,autograd是所有神经网络的核心内容,为Tensor所有操作提供自动求导方法. 它是一个按运行方式定义的框架,这意味着backprop是由代码的运行方式定义的. 一.Varia ...

  10. 学习Matplotlib

    介绍 Matplotlib是一个Python 2D绘图库,可以跨平台生成各种硬拷贝格式和交互式环境的出版品质量图.Matplotlib可用于Python脚本,Python和IPythonshell,j ...