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. 不能将 Null 值赋给类型为 (不可为 null 的值类型)的成员。解决方法

    一般代码没有错,是对应的数据库里有的字段是NULL,不是主键,主键肯定不会是NULL的.是其他字段. 把这些列的NULL赋值.

  2. What does "Rxlch" mean in ENCODE?

    In ENCODE project, we could see some files are called "...rxlch...", which means "rev ...

  3. Thrift 个人实战--Thrift RPC服务框架日志的优化

    前言: Thrift作为Facebook开源的RPC框架, 通过IDL中间语言, 并借助代码生成引擎生成各种主流语言的rpc框架服务端/客户端代码. 不过Thrift的实现, 简单使用离实际生产环境还 ...

  4. R中的统计检验函数

    正态性W检验 shapiro.test()用Shapiro-Wilk W统计量做数据的正态性检验. 经验分布的Kolmogorov-Smirnov检验 ks.test()Kolmogorov-Smir ...

  5. centos7+nginx 1.9.0+php-fpm+phpstorm+xdebug+vmware开发环境搭建

    1.php-fpm yum install php-fpm 默认配置在本地9000端口监听 service php-fpm restart启动 2.nginx 1.9.0 需先安装gcc zlib o ...

  6. 用.htaccess获取文件夹和文件名

    有时需要重定向/article/1.html文件到index.php 把.htaccess放在和index.php同一个文件夹内 反向引用中的$1代表目录,$2代表去除.html后缀后的文件名 Rew ...

  7. 轻量级分布式 RPC 框架

    @import url(/css/cuteeditor.css); 源码地址:http://git.oschina.net/huangyong/rpc RPC,即 Remote Procedure C ...

  8. python检测字符串的字母

    python3判断字符串内是否含有字母,并打印字母出来 # !/usr/bin/python3.4 # -*- coding: utf-8 -*- import re a = "8a2656 ...

  9. css中的浮动以及清除浮动

    对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...

  10. document.write 动态加载 script 脚本时，特殊异常

    项目中有个JS,需要动态引入. 写法如下: <script> document.write('<script src="http://www.z4.com/js/xxxx. ...