SVG即Scalable Vector Graphics可缩放矢量图形，使用XML格式定义图形， 主要优势在于可缩放的同时不会影响图片的质量。

SVG 在html 中常用的方法

1.使用<img>元素来嵌入SVG图像

<img src=”http://www.w3school.com.cn/svg/rect1.svg”  width=”300″ />

2.将SVG图像作为背景图像嵌入

background: url(‘http://www.w3school.com.cn/svg/rect1.svg’) no-repeat;

3.使用svg元素，通过代码将SVG图像嵌入到HTML代码中

<svg width=”100%” height=”100%”>

<rect x=”20″ y=”20″ width=”250″ height=”250″style=”fill:#fecdddd;”/>

</svg>

兼容性

IE   9~11          Firefox   40 +       Chrome  43+     Safari   8+      Opera  32+

svg sprites

svg sprites类似于css sprites，将各个svg合并在一起。

最主要的优点就是能减少页面的加载时间，优化开发流程，以及保持页面中图片元素的一致性。

实践中我们可以把整块的svg放在head头部， 因此可以在一处地方更新svg即可，而不是让svg的代码块散落在文档的各个地方。

<head>

<meta charset=”utf-8″ />

<title>svg</title>

<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” width=”32″ height=”158″ viewBox=”0 0 32 158″>

<!– SVG等省略  –>

</svg>

</head>

SVG形状

矩形 <rect>

<rect x=”20″ y=”20″ rx=”20″ ry=”20″ width=”250″ height=”100″ style=”fill:red;stroke:black; stroke-width:5;opacity:0.5″/>

解释：x为x坐标，y为y坐标；width 和 height 分别为形状的高度和宽度；rx 和 ry 属性可使矩形产生圆角。

属性： fill 属性定义形状的填充颜色

stroke 属性定义图形边框的颜色

stroke-width 属性定义形状边框的宽度

圆形 <circle>

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

解释：cx 和 cy分别为圆点的 x 和 y 坐标；r为半径。

椭圆<ellipse>

<ellipse cx=”300″ cy=”150″ rx=”200″ ry=”80″ style=”fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2″/>

解释：cx 圆点的 x 坐标，cy 圆点的 y 坐标；rx 水平半径，ry 垂直半径。

线<line>

<line x1=”0″ y1=”0″ x2=”300″ y2=”300″ style=”stroke:rgb(99,99,99);stroke-width:2″/>

解释：(x1,y1)为线条的开始坐标；(x2,y2)为线条的结束坐标。

折线<polyline>

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

解释：points 属性定义多边形每个角的 x 和 y 坐标。为了可读性，建议x与y坐标用逗号分开，每个角之间的坐标用空格分开。

多边形<polygon>

<polygon points=”220,100 300,210 170,250″ style=”fill:#cccccc; stroke:#000000;stroke-width:1″/>

解释：points 属性定义多边形每个角的 x 和 y 坐标。

路径<path>

直线指令：

M = moveto

L = lineto

H = horizontal lineto

V = vertical lineto

Z = closepath

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<svg>

<path d=”M250 150 L150 350 L350 350 Z” />

</svg>

解释：该路径开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

由于绘制路径的复杂性，建议使用 SVG 编辑器来创建复杂的图形。

svg的贝塞尔曲线

贝塞尔曲线指令：

C = curveto

S = smooth curveto

Q = quadratic Belzier curve

T = smooth quadratic Belzier curveto

C三次贝塞尔曲线

C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

S光滑三次贝塞尔曲线

S x2 y2, x y (or s dx2 dy2, dx dy)

Q二次贝塞尔曲线

Q x1 y1, x y (or q dx1 dy1, dx dy)

T光滑二次贝塞尔曲线

T x y (or t dx dy)

SVG 使用的更多相关文章

  1. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  2. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

  3. SVG:textPath深入理解

    SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...

  4. SVG:linearGradient渐变在直线上失效的问题解决方案

    SVG开发里有个较为少见的问题. 对x1=x2或者y1=y2的直线(line以及path),比如: <path d="M200,10 200,100" stroke=&quo ...

  5. HTML5_05之SVG扩展、地理定位、拖放

    1.SVG绘图总结: ①方法一:已有svg文件,<img src="x.svg">  方法二:<body><svg></svg>&l ...

  6. HTML5_04之SVG绘图

    1.关于Canvas绘制图像: 问题:需要绘制多张图片时,必须等待所有图片加载完成才能开始绘制:而每张图片都是异步请求,彼此没有先后顺序,哪一张先加载完成完全无法预测: 方案: var progres ...

  7. 关于SVG的viewBox

    在SVG中,通过svg标记的 width和height可以规定这段SVG代码所表达的数据在绘制时所占用的空间大小 如下代码svg设置了宽度与高度,rect同样,所以结果自然是全屏 <svg wi ...

  8. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

  9. Notes:SVG(4)基于stroke-dasharray和stroke-dashoffset圆形进度条

    stroke-dasharray:定义描边的虚线长度,如果提供奇数个,则会自动复制该值成偶数 stroke-dashoffset:定义虚线描边的偏移量(在路径开始的前面,看不到) 实现如下所示 svg ...

  10. Notes:SVG(3)---滤镜和渐变

    SVG滤镜使用filter标签来定义,该标签必须嵌套在defs元素里面,并且必须指定一个ID,以供引用. 在 SVG 中,可用的滤镜有: feBlend feColorMatrix feCompone ...

随机推荐

  1. M6: 使用摄像头(CameraCaptureUI)

    本小节介绍UWP中摄像头的使用,使用CameraCaptureUI来拍照,不仅能够获得图像,还能够对图像进行剪裁 (目前Mobile设备还上不支持). 在本例中, 单击Camera按钮调用摄像头来拍摄 ...

  2. Neo4j Cypher运行示例

    示例来源: Neo4j in Action. 0 准备数据 0.1 node (user1 { name: 'John Johnson', type: 'User', email: 'jsmith@e ...

  3. 地址(Address)——WCF学习笔记(2)

    地址(Address)分为: 统一资源表示(URI). EndpointAddress. 端口共享. 逻辑地址与物理地址. 请求监听与消息分发.

  4. 新冲刺Sprint3（第二天）

    一.Sprint介绍 更新商品图片功能已经完成,准备实现浏览商家相关信息功能和更新商品价格.商品描述功能. 二.Sprint周期 看板: 燃尽图:

  5. 初次学习c语言

    #include<stdio.h> main(){      int o,p,q; scanf("%d%d",&o,&p); q=o+p; printf ...

  6. 第七课 第二节，T语言流程语句（版本5.0）

    while语句 循环结构是程序中一种很重要的结构其特点是,在给定条件成立时,反复执行某程序段,直到条件不成立为止给定的条件称为循环条件,反复执行的程序段称为循环体 (注:关键字,while,end) ...

  7. 正向代理与反向代理的区别【Nginx读书笔记】

    正向代理的概念 正向代理,也就是传说中的代理,他的工作原理就像一个跳板, 简单的说, 我是一个用户,我访问不了某网站,但是我能访问一个代理服务器 这个代理服务器呢,他能访问那个我不能访问的网站 于是我 ...

  8. 黑马程序员——JAVA基础之File类，递归，打印流，合并切割流

    ------- android培训.java培训.期待与您交流! ---------- File类 用来将文件或者文件夹封装成对象 方便对文件与文件夹的属性信息进行操作. File对象可以作为参数传递 ...

  9. unity, terrain道出为obj

    http://wiki.unity3d.com/index.php?title=TerrainObjExporter

  10. jquery选择器之内容选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...