SVG学习笔记一

1、SVG矩形

<rect x="10" y="10" height="50" width="50" rx="5" ry="5" style="stroke:#006600;stroke-width: 3; stroke-dasharray: 10 5; fill: #00cc00;fill-opacity: 0.5"/>

SVG矩形的位置由x和y属性决定。请记住，这个位置是相对于任何它最接近的父元素的位置。
SVG矩形的尺寸由width和height属性决定。
style属性允许你为矩形设置附加的样式，如描边色，描边宽度和填充色等。
rx和ry属性用于决定矩形圆角的大小。rx属性决定圆角的宽度，ry属性则决定圆角的高度。
stroke属性来设置SVG矩形的边框属性。
stroke-width属性来设置SVG矩形的边框的宽度。
stroke-dasharray: 属性来设置SVG矩形的边框设置为虚线。
fill属性来为SVG矩形填充颜色。
fill-opacity属性来设置填充矩形的透明度。

2、SVG圆形

	<circle cx="40" cy="40" r="24" style="stroke:#006600; stroke-width: 3;stroke-dasharray: 10 5;fill:#00cc00"/>
	<ellipse cx="40" cy="40" rx="30" ry="15" style="stroke:#006600;stroke-width: 3;stroke-dasharray: 10 5;stroke-opacity: 0.5; fill:#00cc00"/>

cx和cy表示圆心的坐标，r属性则是圆的半径。
stroke属性来设置SVG圆形的描边属性。
stroke-width设置描边的宽度。
stroke-dasharray属性来实现圆形的虚线描边效果。
fill-opacity属性来设置填充色的透明度。

3、SVG直线

	<line x1="0"  y1="10" x2="0"   y2="100" style="stroke:#006600;"/>

x1和y1属性用于指定直线的起点，x2和y2属性用于指定直线的终点。可以使用style属性来为直线设置颜色和描边宽度。

4、SVG折线

	<polyline points="0,0  30,0  15,30"  style="stroke:#006600;"/>

5、SVG多边形

	<polygon points="50,5   100,5  125,30  125,80 100,105 50,105  25,80  25, 30" style="stroke:#660000; fill:#cc3333; stroke-width: 3;"/>

6、SVG连接标记

	<marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
	    <circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"/>
	</marker>      

连接标记的宽度和高度必须明确指定，因为它是一个单独的图像元素。
refX和refY属性用于指定在连接标记中哪个点用于作为参考点。

	<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
	    <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
	</marker>   

orient属性设置为auto，这样就会自动旋转图形以适应不同的路径。它的单位是degrees，例如设置为：45。这会在使用的时候将这个标记（marker）旋转45度。

	<path d="M100,20 l50,0 l0,50 l50,0" style="stroke: #0000cc; stroke-width: 1px; fill: none;marker-start: url(#markerSquare); marker-mid: url(#markerSquare);marker-end: url(#markerArrow);"/>           

marker-start : url(#markerId); markerId需要替换为你想要使用的<marker>元素。

	<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto" markerUnits="strokeWidth">
	    <rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"/>
	</marker>         

<marker>元素的markerUnits属性的值为strokeWidth来实现的。实际上这是markerUnits属性的默认值。
如果不想标记的大小自动匹配路径的描边宽度，可以设置markerUnits的值为userSpaceOnUse。这样在使用标记的时候，标记将会保持它们原来的大小。

7、SVG文字

	<text x="20" y="40" style="text-anchor: start;kerning:2;letter-spacing:2;word-spacing: 4;transform="rotate(30 20,40)";writing-mode: tb;glyph-orientation-vertical: 0;direction: rtl; unicode-bidi: bidi-override;" textLength="140" lengthAdjust="spacing">这里是SVG文字</text>

(1)text-anchor属性。该属性的取值为：start、middle和end。
(2)letter-spacing和kerning属性来控制文字的间距和字距调整（两个glyphs之间的距离）。
(3)word-spacing CSS属性来指定单词的间距。
(4)writing-mode属性制作垂直的SVG文字，将它的值设置为tb（Top to Bottom）。
(5)glyph-orientation-vertical CSS属性值为0。这个属性值用于旋转glyphs。默认值它的值为90度。
(6)direction CSSS属性来设置文字的渲染方向。direction属性有两个取值：ltr和rtl。
(7)在渲染英文的时候，如果需要字母也从右向左渲染，需要设置unicode-bidi: bidi-override;
(8)textLength属性来设置文字的长度。文字的长度可以用来调整字符（characters）之间的距离来适应指定的长度。同时也会调整符号（glyphs）的宽度。使用lengthAdjust属性你可以指定是否同时调整字符间距和符号的宽度。
font-family 设置字体
font-size 设置文字大小
kerning 设置字距调整的值
letter-spacing 字母之间的间距
word-spacing 单词之间的间距
text-decoration 是否带下划线。可选值有：none、underline、overline和line-through
stroke 文字的描边颜色。默认文字只有填充色，没有描边，添加描边将使文字变粗
stroke-width 文字描边的宽度
fill 文字的填充色

8、SVG多行文本

<text x="20" y="10">
   <tspan>tspan line 1</tspan>
   <tspan dx="30" dy="10">tspan line 2</tspan>
</text>

每一行文本在X轴方向上相对定位可以使用dx属性（delta x）。
每一行文字都相对于前一行文字垂直定位，可以在<tspan>元素中使用dy属性（delta y）。

<tspan dx="5 10 20">123</tspan>
<tspan dy="5 10 20">123</tspan>

<dx>属性中写了多个数字，那么每一个数字会被应用到<tspan>元素的每一个字符上。
<dy>属性中写了多个数字，那么每一个数字会被应用到<tspan>元素的每一个字符上。

<text x="10" y="20">
    这是一个tspan元素的 <tspan style="baseline-shift: super;">上标</tspan>
    和 <tspan style="baseline-shift: sub;">下标</tspan> 混合的文本串效果。
</text>      

baseline-shift CSS属性将一个<tspan>元素设置为上标或下标。

9、SVG defs元素

<defs>
      <g id="shape">
          <rect x="100" y="100" width="100" height="100" />
          <circle cx="100" cy="100" r="100" />
      </g>
  </defs>
  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" /> 

SVG的<defs>元素用于预定义一个元素使其能够在SVG图像中重复使用。
在<defs>元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用<use>元素来引入它们。

10、SVG symbol元素

<symbol id="shape2">
	 <circle cx="25" cy="25" r="25" style="fill:#bf55ec;"/>
</symbol> 
<use xlink:href="#shape2" x="50" y="25" />

SVG <symbol>元素用于定义可重复使用的符号。嵌入在<symbol>元素中的图形是不会被直接显示的，除非你使用<use>元素来引用它。
一个<symbol>元素可以有preserveAspectRatio和viewBox属性。而<g>元素不能拥有这些属性。因此相比于在<defs>元素中使用<g>的方式来复用图形，使用<symbol>元素也许是一个更好的选择。

11、 SVG use元素

<use xlink:href="#shape" x="50" y="50" />
<use xlink:href="#shape" x="200" y="50" />

SVG <use>元素可以在SVG图像中多次重用一个预定义的SVG图形，包括<g>元素和<symbol>元素。被重用的图形可以在定义<defs>的内部（图形将不可见直到使用use来引用它）或外部。
<use>元素可以引用SCG图像中的任何元素，只要这个元素有一个唯一的ID号，
可以在<use>元素中使用style属性来为复用的图形设置它的样式。

12、SVG path元素

<path d="M50,50
           A30,30 0 0,1 35,20
           L100,100
           M110,110
           L100,0"
        style="stroke:#660000; fill:none;"/>  

SVG的<path>元素用于定义一些复杂的图形。它可以结合使用直线，曲线等来制作各种不规则的图形。
所有的这些绘制工作都是在<path>元素中通过d属性来完成的。<d>属性包含了一些用于绘制的命令。
M命令代表“Move to”（移动到）的意思。A命令代表一个“arc”（弧线）。L命令代表“Line”（直线）。
（1）

 <path d="M50,50" style="stroke:#660000; fill:none;"/>  

在<path>元素的d属性中的第一个命令总是一个移动命令。在你绘制图形之前你必须移动虚拟画笔到某个位置上。移动画笔通过M指令来完成。
（2）

 <path d="M50,50 L100,100" style="stroke:#660000; fill:none;"/> 

直线命令是<path>元素最简单的命令。绘制直线使用L或l指令。大小的L指令绘制一条直线到一个绝度位置的点，而小写的l指令绘制一条直线到一个相对位置的点。相对位置的点是指从虚拟画笔开始绘制的点的坐标加上由l指令给出的坐标。看不懂？没关系，我们来举个例子：假如虚拟画笔开始绘制的位置是（50,50），l指令给出的坐标是(100,100)，那么直线将从(50,50)位置开始绘制，绘制到(50+100,50+100)的位置。如果使用的是L100,100指令，那么就是从(50,50)位置开始绘制直线，绘制到(100,100)的位置。
（3）

<path d="M50,50 A30,50 0 0,1 100,100" style="stroke:#660000; fill:none;"/> 

使用<path>元素来绘制弧线使用A或a指令。大小和小写指令的意义与直线命令相同。A指令上的第三个参数是x-axis-rotation。这个参数用于设置弧线X轴方向上的旋转。通常不需要改变这个参数，它的默认值为0。第四和第五个参数分别为large-arc-flag和sweep-flag。它们是两个标志位。我们知道，从A点到B点绘制一条弧线，可以得到两条不同的弧线。一条较大，另一条较小。large-arc-flag就是用于决定到底是绘制较大的那一条弧线还是绘制较小的那一条弧线。
（4）

<path d="M50,50 Q50,100 100,100" style="stroke: #006666; fill:none;"/>    

使用<path>元素绘制二次贝兹曲线。绘制二次贝兹曲线使用Q或q命令。大小写版本的Q命令和直线的原理相同。大小版本的指令代表结束点位于绝对坐标系中。小写版本的的指令代表结束点位于相对坐标系中（相对于开始点）。
（5）

<path d="M50,50 C75,80 125,20 150,50" style="stroke: #006666; fill:none;"/>       

使用<path>元素绘制三次贝兹曲线的命令是C和c。三次贝兹曲线和二次贝兹曲线相同，但是它有两个控制点。大写的命令的结束点使用绝对坐标系，小写的命令的结束点使用的是相对坐标系（相对于开始点）。
（6）

<path d="M50,50 L100,50 L100,100 Z" style="stroke: #006666; fill:none;"/>   

<path>元素有一个闭合路径的快捷命令。闭合路径是指从最后一个绘制点连线到开始点。这个命令是Z（或z，这里大小写没有区别）。

指令 参数 名称 描述
M x,y moveto 移动虚拟画笔到指定的（x,y）坐标，仅移动不绘制
m x,y moveto 移动虚拟画笔到指定的（x,y）坐标，这个坐标是相对于当前画笔的坐标，仅移动不绘制
L x,y lineto 从当前画笔所在位置绘制一条直线到指定的（x,y）坐标
l x,y lineto 从当前画笔所在位置绘制一条直线到指定的（x,y）坐标，(x,y)坐标是相对于花瓣位置的点
H x horizontal lineto 绘制一条水平直线到参数指定的x坐标点，y坐标为画笔的y坐标
h x horizontal lineto 绘制一条水平直线到参数指定的x坐标点（当前x + 指定的x），x坐标相对于当前画笔x坐标
V y vertical lineto 从当前位置绘制一条垂直直线到参数指定的y坐标
v y horizontal lineto 从当前位置绘制一条垂直直线到参数指定的y坐标，y坐标相对于当前画笔的y坐标
C x1,y1 x2,y2 x,y curveto 从当前画笔位置绘制一条三次贝兹曲线到参数（x,y）指定的坐标。x1，y1和x2,y2是曲线的开始和结束控制点，用于控制曲线的弧度
c x1,y1 x2,y2 x,y curveto 于大小C指令相同，但是坐标是相对于画笔的坐标
S x2,y2 x,y shorthand / smooth curveto 从当前画笔位置绘制一条三次贝兹曲线到参数（x,y）指定的坐标。x2,y2是结束控制点。开始控制点和前一条曲线的结束控制点相同
s x2,y2 x,y shorthand / smooth curveto 和大小的S指令相同，但是坐标是相对于当前画笔的坐标点
Q x1,y1 x,y 二次贝兹曲线 从当前画笔位置绘制一条二次贝兹曲线到参数（x,y）指定的坐标。x1,y1是控制点，用于控制曲线的弧度
q x1,y1 x,y 二次贝兹曲线 和大小的Q指令相同，但是坐标是相对于当前画笔的坐标点
T x,y 平滑的二次贝兹曲线 从当前画笔位置绘制一条二次贝兹曲线到参数（x,y）指定的坐标。控制点被假定为最后一次使用的控制点
t x,y 平滑的二次贝兹曲线 和大小的T指令相同，但是坐标是相对于当前画笔的坐标点
A rx,ry x-axis-rotation large-arc-flag,sweepflag x,y 椭圆弧线 从当前画笔位置开始绘制一条椭圆弧线到（x,y）指定的坐标。rx和ry分别为椭圆弧线水平和垂直方向上的半径。x-axis-rotation指定弧线绕x轴旋转的度数。它只在rx和ry的值不相同是有效果。large-arc-flag是大弧标志位，取值0或1，用于决定绘制大弧还是小弧。sweep-flag用于决定弧线绘制的方向
a rx,ry x-axis-rotation large-arc-flag,sweepflag x,y 椭圆弧线 和大写的A指令相同，但是坐标是相对于当前画笔的坐标点
Z 无 闭合路径 从结束点绘制一条直线到开始点，闭合路径
z 无 闭合路径 从结束点绘制一条直线到开始点，闭合路径