2017-03-09

svg基本语法

一、什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

二、简单的实例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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 代码解析：
第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是”独立的”，或含有对外部文件的引用。
standalone=”no” 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
SVG 代码以 <svg>元素开始，包括开启标签 <svg>和关闭标签。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
SVG 的 <circle>用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
关闭标签的作用是关闭 SVG 元素和文档本身

三、SVG在HTML页面

使用<embed>标签
1.优势：所有主要浏览器都支持，并允许使用脚本
2.缺点：不推荐在HTML4和XHTML中使用
3.语法：

1	<embed src="circle1.svg" type="image/svg+xml" />

使用<object>标签
1.优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
2.缺点：不允许使用脚本
3.语法：

1	<object data="circle1.svg" type="image/svg+xml"></object>

<iframe>
1.优势：所有浏览器都支持，并允许使用脚本
2.缺点：不推荐在HTML4和XHTML中使用
3.语法：

1	<iframe src="circle1.svg"></iframe>

直接在HTML嵌入SVG代码

<html>
<body>
<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>
</body>
</html>

链接到SVG文件

1	<a href="circle1.svg">View SVG file</a>

四、SVG矩形

1.属性
1.rect 元素的 width 和 height 属性可定义矩形的高度和宽度
2.style 属性用来定义 CSS 属性
3.CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
4.CSS 的 stroke-width 属性定义矩形边框的宽度
5.CSS 的 stroke 属性定义矩形边框的颜色
6.x 属性定义矩形的左侧位置（例如，x=”0” 定义矩形到浏览器窗口左侧的距离是 0px）
7.y 属性定义矩形的顶端位置（例如，y=”0” 定义矩形到浏览器窗口顶端的距离是 0px）
8.CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
9.CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
10.CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
11.rx 和 ry 属性可使矩形产生圆角。
2.实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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>

五、圆形

1.属性
1.cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
2.r属性定义圆的半径
2.实例

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

六、椭圆

1.属性
1.CX属性定义的椭圆中心的x坐标
2.CY属性定义的椭圆中心的y坐标
3.RX属性定义的水平半径
4.RY属性定义的垂直半径
2.实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>

七、直线

1.属性
1.x1 属性在 x 轴定义线条的开始
2.y1 属性在 y 轴定义线条的开始
3.x2 属性在 x 轴定义线条的结束
4.y2 属性在 y 轴定义线条的结束
2.实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

八、多边形

1.属性
points 属性定义多边形每个角的 x 和 y 坐标
2.实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

九.曲线

1.属性
属性值与直线完全相同，只不过标签名改为polyline

十.路径

1.属性
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

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

2.实例
实例一：

1
2
3

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

结果是一个三角形，颜色默认的为黑色

实例二：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

结果是二次贝塞尔曲线
alt text

十一、文本

1.属性
1.transform=”rotate([angle] [px,py])”
[angle] : 旋转角度。由于屏幕坐标和数学坐标的Y轴相反，所以向左旋转为正角度值。
[px,py] : 旋转的中心点。参数缺省默认为圆点（0,0）。
2.实例
实例一：

1
2
3

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

旋转的文字
alt text

实例二：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

路径上的文字（注意路径的绑定）:
alt text

实例三：

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

元素可以安排任何分小组与<tspan> 元素的数量。每个<tspan> 元素可以包含不同的格式和位置。几行文本(与 <tspan> 元素):
alt text

实例四：

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

作为链接文本：
alt text

十二、stroke属性

1.属性
stroke 颜色
stroke-width 宽度
stroke-linecap 末端形状
stroke-dasharray 虚线属性
2.实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

十三、滤镜

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

十四、模糊效果

1.代码组成解析
1.<filter>元素id属性定义一个滤镜的唯一名称
2.<feGaussianBlur>元素定义模糊效果
3.in=”SourceGraphic”这个部分定义了由整个图像创建效果
4.stdDeviation属性定义模糊量
5.<rect>元素的滤镜属性用来把元素链接到”f1”滤镜
2.实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

alt text

十五、阴影

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

1.<feOffset>元素是用于创建阴影效果。我们的想法是采取一个SVG图形（图像或元素）并移动它在xy平面上一点儿。
第一个例子偏移一个矩形（带<feOffset>），然后混合偏移图像顶部（含<feBlend>）：
2.<feGaussianBlur>元素的stdDeviation属性定义了模糊量
3.<feOffset>元素的属性改为”SourceAlpha”在Alpha通道使用残影，而不是整个RGBA像素。
4.<feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色。 ‘0.2’矩阵的三个值都获取乘以红色，绿色和蓝色通道。降低其值带来的颜色至黑色（黑色为0）

十六、线性渐变`<linearGradient>`

<linearGradient>元素用于定义线性渐变。
<linearGradient>标签必须嵌套在的内部。标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可以定义为水平，垂直或角渐变：
当y1和y2相等，而x1和x2不同时，可创建水平渐变
当x1和x2相等，而y1和y2不同时，可创建垂直渐变
当x1和x2不同，且y1和y2不同时，可创建角形渐变

实例一:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

<linearGradient>标签的id属性可为渐变定义一个唯一的名称
<linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个标签来规定。offset属性用来定义渐变的开始和结束位置。
填充属性把 ellipse 元素链接到此渐变

十七、放射性渐变 `<radialGradient>`

<radialGradient>标签的 id 属性可为渐变定义一个唯一的名称
CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束
填充属性把ellipse元素链接到此渐变

↑
感谢对作者工作的大力支持，以下两个二维码中，左边的是支付宝二维码，右边的是微信二维码