[note]SVG基本教程

SVG基本图形

　　SVG内建图形有：

• 长方形（RECTANGLE）
• 圆形(CIRCLE)
• 椭圆形(ellipse)
• 直线(line)
• 多边形(polygon)
• 连续线（polyline)

图形着色

• Fill ：设定图形内部着色
• Fill-opacity：设定图形内部透明度
• Stroke：设定图形轮廓着色
• Stroke-width：设定图形轮廓宽度

<rect>元素

• X：起始点ｘ轴座标
• Ｙ：起始点ｙ轴座标
• Width：长方形宽度
• Height：长方形高度
• rx：圆角方形ｘ半径
• ry：圆角方形ｙ半径

图2 SVG <RECT>元素

　　部份代码：

<rect x="10" y="10" width="50" height="50" />
<rect x="10" y="150" rx="5" ry="5" width="50" height="50" fill="green" stroke="red"/>

　　解说：以上两个图形的差别是在设定rx和ry的有无，绿色边角有圆弧度！

<circle>元素

• Cx：圆心之ｘ轴座标
• Cy：圆心之ｙ轴座标
• R：圆之半径

图3 SVG <circle>元素

　　部份代码：

<circle cx="30" cy="30" r="25" />
<circle cx="150" cy="90" r="25" fill="green" stroke="red" stroke-width="4" stroke-opacity="0.5"/>

　　解说：此两圆差别在于stroke和stroke_width的设定 第二个图有设定stroke=red 他的轮廓有红色包围

<ellipse>元素

• Cx：椭圆形圆心ｘ轴座标
• Cy：椭圆形圆心ｙ轴座标
• Ｒx：椭圆形ｘ轴之半径
• Ｒy：椭圆形ｙ轴之半径

图4 SVG <ellipse>元素

　　部份代码：

<ellipse cx="30" cy="30" rx="25" ry="15" />
<ellipse cx="210" cy="30" rx="25" ry="15" fill="none" stroke="red" />

　　解说：两图的差别在第二个fill的属性有设定填满为none表示没有无填满，而第一个图没有设定的话，他的default 值为填满！

<line>元素

• X1：起始点x轴座标。
• y1：起始点y轴座标。
• X2：结束点x轴座标。
• y2：结束点y轴座标。

图5 SVG <line>元素

　　部份代码：

<line x1="10" y1="10" x2="50" y2="50" />
<line x1="60" y1="10" x2="110" y2="50" stroke="green"/>

　　解说：两点成一直线，所以只要设定两点x1 y1 x2 y2就会自动连成一直线

<ploygon>元素

图6 SVG <ploygon>元素

　　解说：跟直线的性质大略相同，不过可以设多点，他会自动连接起来，自动连成一个多边形！

<svg>元素

　　<svg>元素用来产生一块画布，让SVG图形元素能被描绘在上面，它是SVG文件的根元素，<svg>~</svg>元素之间所包含的SVG被称为SVG文件；在资源情况下，可以被嵌入行内作为XML父文件的里的一个片段。SVG文件必须遵照在XML的名称空间推荐，宣告名称空间以便所有SVG元素能被辨认属于这个SVG名称空间。

<title>及<desc>元素

　　用来描述文字字串，常与群组结构元素或图形元素连用以提供相关资讯。<desc>及<title>元素的内容不会被显示画布上，相当于是注解功能。

<g>元素

 　　是一种用来群组相关图形元素在一起的容器元素，群组元素被视为单独物件，可以使用属性id为群组命名以便做为动画及再使用物件。

图7 SVG <g>元素

　　部份代码：

 <desc>圆群组</desc>
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
    <circle cx="6cm" cy="2cm" r="100" fill="red"
                    transform="translate(0,50)" />
    <circle cx="6cm" cy="2cm" r="100" fill="blue"
                    transform="translate(70,150)" />
    <circle cx="6cm" cy="2cm" r="100" fill="green"
                    transform="translate(-70,150)" />
  </g>

　　下面是<g>元素代码示范

<?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 width="4in" height="3in" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Groups can nest
</desc>
<g>
<g>
<g>
</g>
</g>
</g>
</svg>

　　<g>元素简言之，其实就相当于今日大家所使用的msn的群组功能，而<g>元素可以将相似的图形都归类在一起，属性id也相当于是群组的名称，以便日后要再被使用时可以被呼叫。如上例，就有三个子元素的circle构成的一个群组，而此群组的名称就称为g1。

　　下图是SVG <g>元素实例，点击图片可以查看SVG文件。

图8 SVG <g>元素实例

<symbol>元素

　　主要用途是为相同文件里，多次使用的图形模版画以增加文件结构性。

图9 SVG <symbol>元素

　　以右图的箭头为例:

<svg>
<desc>定义箭头符号</desc>
　　<symbol id="arrow" >
　　<path d="M10 50 v -20 h50 v-25 l 40 45 M10 50 v 20 h50 v 25 l 40 -45 " />
　　</symbol>
　<desc>symbol的使用方法</desc>
　　<use x="0" y="20" xlink:href="#arrow" fill="green" stroke="red" fill-opacity="0.1"/>
</svg>

　　补充一下说明此箭头的形成：参照上面范例的path，l是一个起点，10和50这两组数字分别代表X与Y的位置，而图形从此这做起。接着v但表垂直，-20是相对于M的位置而言，所以要往下20，接着h50是水平线往右移动50，再来v-25又是往下25，接着l 40 45，是画斜的连接到(40,45)的位置，这样就完成了一半，另外一半对称图形也是此类推即可完成。
 
　　补充说明：

• <symbol>元素与<g>元素的差别是:
• <symbol>元素本身不被显示，只有<symbol>元素的例证才会被显示。
• <symbol>元素的有viewBox和preserveAspectRatio属性允许
• <symbol>做适合缩放以符合由<use>元素定义长方形的观测阜。

<defs>元素

　　<defs>元素的内容模式和<g>元素一样，因此，任何使用在<g>元素容器里的子元素，同样的也可以使用在<defs>元素里，反之亦然，<defs>元素的内容不会直接被显示。而<defs>元素是针对被参考元素的容器元素，为了文件的可读性及可存取性而设置的，SVG规范建议尽可能将被参考的元素定义在<defs>元素中。

图10 SVG <defs>元素

<desc>定义参考字串及文字路径</desc>
<defs>
　<text id="refText">SVG</text>
　<path id="pathText" d="M40 100 a 50 50 0 0 1 100 0 m 0 0 a 50 50 0 0 1 -100 0 "  />
</defs>
　<text fill="green" font-size="20" letter-spacing="4">
　　<textPath xlink:href="#pathText">text reference to a path
　　</textPath>
　</text>

<image>元素

　　可以将一个完整个档案内容显示在当前使用者坐标系统所指定的长方形<image>元素能参考光栅图形影像档案，像是PNG、JPEG、MIME格式的档案。

<image x="40" y="40" width="100px" height="100px" xlink:href="/./graphics/123123.gif" />

　　下图是SVG <image>元素实例，点击图片可以查看SVG文件。

图11 SVG <image>元素实例

SVG 引用SMIL动画元素

• <animate>   对单一随时间变化的属性做动画
• <set> 非数值属性和性质的动画
• <animateMotion>  让一个元素沿着路径运动
• <animateColor>  设定随时改变的颜色转换

SVG 延伸SMIL动画元素

　　<animateTransform> 允许动画控制平移、缩放、旋转、倾斜
　　Path属性 允许path属性设定到animateMotion元素
　　<mpath>  SVG允许一个animateMotion元素包含一个参考到SVGpath元素，当作运动路径定义的mpath子元素
　　keyPoint属性 SVG增加keyPoint属性，对animateotion元素运动路径动画精确的速度控制
　　rotate属性 SVG增加rotate属性，提供animateMotion元素控制物件在她的X轴相同方向或相反方向自动旋转，当为运动路径的方向切线速度

SVG的动态图片1

　　之前的效果

图12 SVG 动态图片1之前的效果

 
　　之后的效果

图13 SVG 动态图片1之后的效果

<animate attributeName="width" form=“400" to=“800" begin="0s" dur="10s" repeatCount="1" fill="freeze"/>

　　这个动态图片是一张图片分割成两边，从中间向两旁延伸，以上的文件是属于右边的延伸，form=“400" to=“800”表示从图片横向座标的400到800做延伸，左边则是form=“400" to=“0”

　　例图：

图14 SVG 动态图片1右边的效果

SVG的动态图片2

　　这个动态图片是利用begin元素设定不同的触发条件来控制图片起跑的顺序

　　例图：

图15 SVG 动态图片2效果

<animate id="r1X" xlink:href="#r1" attributeName="x" attributeType="XML" from="0" to="600" begin="r1.click"  dur="2s" repeatCount="1" />

　　这段的文件，控制第一张图片的起跑触发是begin="r1.click"，我们将它设定为当我点下滑鼠才会起跑

　　另外四张图，都有不同的触发条件

• begin=“r1.click“  点一下起跑
• begin=“accessKey(S)“ 按下S起跑
• begin=“0s;r5X.end“ 一开始起跑和r5结束起跑
• begin=“r3X.repeat(2)“ r3跑两次后起跑
• begin=“r4X.end+1s“ r4结束后一秒起跑

　　好了，本篇文章讲到这里就结束了，对于SVG入门文章大家可以可以参见更详细的内容：“新一代Web设计及互动媒体的革” 与 “什么是SVG(可升级矢量图形)”。该两篇文章主要是让大家了解什么是SVG,以及SVG的优点等知识。

(THE END)