HTML5 内联 SVG

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
SVG优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的

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

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas	SVG
依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用

SVG 的主要竞争者是 Flash。

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

查看 SVG 文件

Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。

IE8和早期版本都需要一个插件 - 如Adobe SVG浏览器，这是免费提供的。

创建SVG文件

由于SVG是XML文件，SVG图像可以用任何文本编辑器创建，但它往往是与一个绘图程序一起使用，如Inkscape，更方便地创建SVG图像。

简单的 SVG 实例

一个简单的SVG图形例子：

//第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是"独立的"，或含有
对外部文件的引用standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件

　　<?xml version="1.0" standalone="no"?>

//第二和第三行引用了这个外部的 SVG DTD。
该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。
该 DTD 位于 W3C，含有所有允许的 SVG 元素。
　　<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
//SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。
//width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，
//xmlns 属性可定义 SVG 命名空间。
　　<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

　　//SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

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

SVG 在 HTML 页面

SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。

SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件。

使用<embed>标签
优势：所有主要浏览器都支持，并允许使用脚本
缺点：不推荐在 HTML4 和 XHTML 中使用（但在 HTML5 中允许）
语法：<embed src="circle1.svg" type="image/svg+xml"/>

使用 <object> 标签
优势：所有主要浏览器都支持，并支持 HTML4、XHTML和HTML5标准
缺点：不允许使用脚本
语法：<object data="circle1.svg" type="image/svg+xml"></object>

使用<iframe>标签
优势：所有主要浏览器都支持，并允许使用脚本
缺点：不推荐在 HTML4 和 XHTML 中使用（但在 HTML5 中允许）
语法：<iframe src="circle.svg"></iframe>

直接在 HTML 中嵌入 SVGA 代码

<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>

链接到 SVGA 文件
可以使用 <a> 标签链接到一个 SVGA 文件
语法：<a href="circle.svg">View SVG File</a>

SVG Shapes

SVG有一些预定义的形状元素，可被开发者使用和操作：

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>

路径 <path>

SVG 矩形　- <rect>

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    /**
    rect 元素的 width 和 height 属性可定义矩形的高度和宽度
    style 属性用来定义 CSS 属性
    CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
    CSS 的 stroke-width 属性定义矩形边框的宽度
    CSS 的 stroke 属性定义矩形边框的颜色*/
  <rect width="300" height="100" 
        style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
    
    /**
        x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
        y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
        CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
        CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
    */
<rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9"/>
    
    /**
        CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
    */
     <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
    
    /**
        rx 和 ry 属性可使矩形产生圆角。
    */
    <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
</body>
</html>

SVG 圆形　- <circle>

<!DOCTYPE html>
<html>
<body>
    /**
    cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
    r属性定义圆的半径
    */
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="green" 
　　   stroke-width="2" fill="red" />
</svg> 
</body>
</html>

SVG 椭圆形 - <ellipse>

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

/**

CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

　　*/

<ellipse cx="100" cy="80" rx="100" ry="50"
          style="fill:yellow;stroke:purple;stroke-width:2" />
<ellipse cx="100" cy="100" rx="100" ry="50"
         style="fill:red;stroke:black;stroke-width:3;"/>
    </svg>

</body>
</html>

SVG 直线-<line>

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    /**
        x1 属性在 x 轴定义线条的开始
        y1 属性在 y 轴定义线条的开始
        x2 属性在 x 轴定义线条的结束
        y2 属性在 y 轴定义线条的结束
    */
  <line x1="0" y1="0" x2="200" y2="180"
        style="stroke:rgb(255,0,0);stroke-width:2" />
    <line x1="0" y1="0" x2="0" y2="100"
          style="stroke:red;stroke-width:2;"/>
    <line x1="0" y1="100" x2="165" y2="150"
          style="stroke:red;stroke-width:2;" />
</svg>

</body>
</html>

SVG <polygon> - 多边形
polygon 用来创建含有不少于三个边的图形。多边形是由直线组成，其形状是封闭的（所有线条连接起来）

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400">
    //SVG的图形填充规则通过fill-rule属性来指定
    //points 属性定义多边形每个角的 x 和 y 坐标
  <polygon points="100,10 40,180 190,60 10,60 160,180" 
           style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
    <polygon points="50,50,150,50,70,150,100,20,150,150"
             style="fill:red;stroke:yellow;stroke-width:3;fill-rule:nonzero;"/> 
    </svg>
</body>
</html>

SVG曲线 - <polyline>
<polyline> 元素是用于创建任何只有直线的形状：
points 属性定义多边形每个角的 x 和 y 坐标

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" 
            style="fill:white;stroke:red;stroke-width:4" />
</svg>
</body>
</html>

SVG - 路径<path>

<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

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

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    /*上面的例子定义了一条路径，它开始于位置150 0，到达位置75 200，
    然后从那里开始到225 200，最后在150 0关闭路径。
*/
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>
</body>
</html>

SVG文本 - <text>

实例：
<!DOCTYPE html>
<html>
<body>
/**写一个文本/
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love SVG</text>
</svg>
 /*旋转的文字*/
    //rotate（deg,y,x）
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
/*元素可以安排任何分小组与<tspan> 元素的数量
    <tspan> 元素的样式可以同 fill="" 单独设置*/
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line</tspan>
    <tspan x="10" y="70">Second line</tspan>
  </text>
</svg>
/*作为链接文本<a>元素*/
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="http://www.w3schools.com/svg/" target="_blank">
    <text x="0" y="15" fill="red">I love SVG</text>
  </a>
</svg>
</body>
</html>

SVG stroke 属性
stroke 属性：

stroke
stroke-width
stroke-linecap
stroke-dasharray

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none">
     //Stroke属性定义一条线，文本或元素轮廓颜色：
    <path stroke="red" d="M5 20 l215 0" />
    //stroke-width属性定义了一条线，文本或元素轮廓厚度
    <path stroke="black" stroke-width="10" d="M5 40 l215 0" />
     //stroke-linecap属性定义不同类型的开放路径的终结：
    <path stroke="blue" stroke-width="10" stroke-linecap = "round"
          d="M5 60 l215 0" />
     //stroke-asharray属性用于创建虚线：
      <path stroke="green" stroke-width="5" stroke-linecap="round" 
            stroke-dasharray = "10,10"
            d="M5 80 l215 0"/>
  </g>
</svg>
</body>
</html>

SVG 滤镜
　　svg 滤镜用来增加对 svg 图形的特殊效果

feBlend - 与图像相结合的滤镜
feColorMatrix - 用于彩色滤光片转换
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - 过滤阴影
feSpecularLighting
feTile
feTurbulence
feDistantLight - 用于照明过滤
fePointLight - 用于照明过滤
feSpotLight - 用于照明过滤

Remark 除此之外，您可以在每个 SVG 元素上使用多个滤镜！

SVG 模糊效果 - <feGaussianBlur>

<!DOCTYPE html>
<html>
<body>
<p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
/*所有互联网的SVG滤镜定义在<defs>元素中。
    <defs>元素定义短并含有特殊元素（如滤镜）定义。*/
  <defs>
      /*<filter>标签用来定义SVG滤镜。
     <filter>元素id属性定义一个滤镜的唯一名称*/
    <filter id="f1" x="0" y="0">
    //<feGaussianBlur>元素定义模糊效果
    //in="SourceGraphic"这个部分定义了由整个图像创建效果
    //stdDeviation属性定义模糊量
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
    //<rect>元素的滤镜属性用来把元素链接到"f1"滤镜
  <rect width="90" height="90" stroke="green" stroke-width="3" 
        fill="yellow" filter="url(#f1)" />
</svg>
</body>
</html>

SVG 渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。

SVG渐变主要有两种类型：

Linear
Radial

SVG 渐变 - 线形 - <linearGradient>

<linearGradient>元素用于定义线性渐变。

<linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可以定义为水平，垂直或角渐变：

当y1和y2相等，而x1和x2不同时，可创建水平渐变
当x1和x2相等，而y1和y2不同时，可创建垂直渐变
当x1和x2不同，且y1和y2不同时，可创建角形渐变

实例：
    <!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
     //当y1和y2相等，而x1和x2不同时，可创建水平渐变
    //当x1和x2相等，而y1和y2不同时，可创建垂直渐变
    //当x1和x2不同，且y1和y2不同时，可创建角形渐变
    //<linearGradient>标签的id属性可为渐变定义一个唯一的名称
    //<linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置
    <linearGradient id="grad1" x1="0%" y1="10%" x2="120%" y2="100%">
    //渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。
        offset属性用来定义渐变的开始和结束位置。
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="50%" style="stop-color:green;stop-opacity:1"  />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
//填充属性把 ellipse 元素链接到此渐变
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
      //在椭圆内添加一个文本
     <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
</svg>
</body>
</html>

SVG 放射性渐变 - <radialGradient>
<radialGradient>元素用于定义放射性渐变。
<radialGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

实例：
    <!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
     //<radialGradient>标签的 id 属性可为渐变定义一个唯一的名称
      //CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    //渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。
        offset属性用来定义渐变色开始和结束
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs
    //填充属性把ellipse元素链接到此渐变
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
</body>
</html>

posted on 2018-01-20 16:04 最菜的后端想转前端阅读(998) 评论(0) 编辑收藏举报

刷新页面返回顶部