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. OD调试篇8

    那么今天需要破解的呢,是这样一款软件. 程序刚刚进去会发现一个nag弹窗   说没有注册,要花20美金才能注册.只有5天的限制期限可以用了 进去之后 点击help里的关于这款软件   也显示了这是一个 ...

  2. Windows Server 2012 R2在桌面上顯示我的電腦等圖示

    Windows Server 2012 R2在桌面上顯示我的電腦等圖示   從Windows2012開始,微軟取消了服務器桌面個性化選項,如何重新調出配置界面,可以使用微軟命令調出.方法如下: 同時按 ...

  3. PCL安装使用

    一. 下载安装 http://pointclouds.org/downloads/windows.html 1. QT安装在默认路径下(否则后续会出现问题),添加环境变量QTDIR(c:\Qt\4.8 ...

  4. Unity Sprite切割导出

    这次需要将美术提供的Sprite图集切割导出,整体思路依然和上次的Sprite转prefab一致,只是在转prefab的逻辑修改为了创建Texture的逻辑. 过程很简单,直接看最终代码结果: usi ...

  5. 05——C++自己合成的函数

    C++编译器自己合成的构造函数: 默认构造函数 copy构造函数 copy assigment操作符 析构函数(编译器产生的析构时non-virtual) copy assignment(当含有con ...

  6. 路由器DHCP 动态主机配置

    进入ip设置:ip pool fw 添加网关gateway-list 192.168.1.1 添加网段network 192.168.1.0 mask 255.255.255.0 域名 dns-lis ...

  7. 2016年中国大学生程序设计竞赛（合肥）-重现赛1009 HDU 5969

    最大的位或 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...

  8. F1 分数

    F1 分数会同时考虑精确率和召回率,以便计算新的分数. 可将 F1 分数理解为精确率和召回率的加权平均值,其中 F1 分数的最佳值为 1.最差值为 0: F1 = 2 * (精确率 * 召回率) / ...

  9. [转]UDP穿透NAT的原理与实现（UDP“打洞”原理）

    NAT(The IP Network Address Translator) 的概念和意义是什么? NAT, 中文翻译为网络地址转换.具体的详细信息可以访问RFC 1631 - http://www. ...

  10. 每日学习心得：Js基本数据类型常用方法扩展

    2014-02-17 前言: 节后的第一周上班,整个状态调整的还不错,已完全进入正常的工作状态.这一周主要还是对年前项目存在的一些问题进行完善.修整,基本上没有做大的改动.这里就把项目中经常用到的一些 ...