SVG可伸缩矢量图形学习笔记

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

示例文件：

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

    第一行是声明xml文件，属性standalone属性表明此xml文件是否独立的文件，no则表明不是独立的，包含对外部的引用，此处是dtd文件

    第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C，含有所有允许的 SVG 元素。

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中的引用：

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

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

首先看看在三种标签引用svg文件的优缺点

<embed>:

• 优势：所有主要浏览器都支持，并允许使用脚本
• 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

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

<object>:

• 优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
• 缺点：不允许使用脚本。

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

<iframe>:

• 优势：所有主要浏览器都支持，并允许使用脚本
• 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

语法:

<iframe src="circle.svg" ></iframe>

直接在HTML嵌入SVG代码

在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。

注意：SVG不能直接嵌入到Opera。

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

您还可以用<a>标签链接到一个SVG文件：链接到SVG文件

您还可以用<a>标签链接到一个SVG文件：

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

SVG预定义的一些元素可供开发者使用，下面将一一介绍：

矩形SVG <rect>

<span style="font-size:14px;"><label>矩形</label>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg></span>

示例2

<label>矩形</label>
<pre name="code" class="html" style="color: rgb(51, 51, 51); font-size: 13.2px; line-height: 26.4px;"><span style="font-family: 'courier new'; font-size: 13.2px;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"></span><br style="font-family: 'courier new'; font-size: 13.2px;" /><span style="font-family: 'courier new'; font-size: 13.2px;">  <rect x="50" y="20" <span style="font-family: 'courier new'; font-size: 13.2px;"> rx="20" ry="20" </span>width="150" height="150"</span><br style="font-family: 'courier new'; font-size: 13.2px;" /><span style="font-family: 'courier new'; font-size: 13.2px;">  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;</span><br style="font-family: 'courier new'; font-size: 13.2px;" /><span style="font-family: 'courier new'; font-size: 13.2px;">  stroke-opacity:0.9"/></span><br style="font-family: 'courier new'; font-size: 13.2px;" /><span style="font-family: 'courier new'; font-size: 13.2px;"></svg></span>

• x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px） rx 和ry可使矩形产生圆角
• y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
• CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
• CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

圆形<circle>

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

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

椭圆<ellipse>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

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

SVG 直线 - <line>

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

• x1 属性在 x 轴定义线条的开始
• y1 属性在 y 轴定义线条的开始
• x2 属性在 x 轴定义线条的结束
• y2 属性在 y 轴定义线条的结束

SVG 多边形 - <polygon>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

fill-rule: nonezero 默认值 | evenodd |  inherit

SVG 曲线 - <polyline>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

SVG 路径 - <path>

下面的命令可用于路径数据：

• M = moveto 将画笔移动到指定的坐标位置
• L = lineto 画直线到指定的坐标位置
• H = horizontal lineto 画水平线到指定的X坐标位置
• V = vertical lineto 画垂直线到指定的Y坐标位置
• C = curveto 三次贝赛曲线
• S = smooth curveto
• Q = quadratic Bézier curve 二次贝赛曲线
• T = smooth quadratic Bézier curveto 映射
• A = elliptical Arc 弧线
• Z = closepath 关闭路径

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

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

注：

坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。
所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系
指令和数据间的空格可以省略
同一指令出现多次可以只用一个

1、L H V指令

 

M　起点X，起点Y　L（直线）终点X，终点Y　H（水平线）终点X　V（垂直线）终点Y
如：M 10,20 L 80,50 M 10,20 V 50 M 10,20 H 90

 

2、A指令

 

允许不闭合。可以想像成是椭圆的某一段，共七个参数：

A RX,RY,XROTATION,FLAG1,FLAG2,X,Y

RX,RY指所在椭圆的半轴大小
XROTATION指椭圆的X轴与水平方向顺时针方向夹角，可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。
FLAG1只有两个值，1表示大角度弧线，0为小角度弧线。
FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针
X,Y为终点坐标

如：m 200,250 a 150,30 0 1 0 0,70

SVG 文本 - <text>

<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> 元素可以包含不同的格式和位置。几行文本(与 <tspan> 元素):

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