07-16日份学习（SVG的使用）

SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

●SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

●SVG 用来定义用于网络的基于矢量的图形

●SVG 使用 XML 格式定义图形

●SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

●SVG 是万维网联盟的标准

●SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG图形的创建方法

直接在HTML中创建
<svg width="" height="">

// 插入需要的图形

</svg>

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

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

矩形+矩形圆角代码：

<!-- 
     x:水平坐标轴
     y:垂直坐标轴 
-->
     <rect x="400" y="30" width="100" height="100" ></rect>  //矩形

<!--
    rx:矩形圆角是以r为半径画的圆
-->
    <rect x="400" y="30" width="100" height="100" rx="10"></rect>  //矩形圆角

 矩形+圆角效果展示：

 

圆形代码:

<!-- 
     绘制圆形：使用circle，还可以使用rect标签结合圆角的值实现圆形或椭圆形的绘制 
     cx：圆形的中心点x轴坐标
     cy：圆形的中心点y轴坐标
     r：圆形的半径
     stroke-opacity：设置线条的透明度
     fill-opacity：设置填充的透明度
-->
     <circle cx="300" cy="400" r="100" fill="red" stroke="green" stroke-width="10" 
stroke-opacity="0.3"></circle>

圆形效果展示：

 椭圆代码：

<!-- 椭圆 -->
     <ellipse cx="500" cy="200" rx="100" ry="50"></ellipse>

椭圆效果展示：

直线代码：

<!-- 绘制直线 line标签 -->
     <line x1="20" y1="200" x2="200" y2="200" stroke="red" ></line>

 直线效果展示：

折线代码：

<!-- 绘制折线 polyline -->
     <polyline points="0,0,0,100,50,10" stroke="green" fill="none"></polyline>

折线效果展示：

 闭合多边形代码：

<!-- 绘制闭合多边形 -->
     <polygon points="200 100 200 150 ,300 150 300 50 " stroke="green" 
stroke-width="3" fill="none"></polygon>

多边形效果展示：

<circle>元素用来画一个圆，它是通过给定一个圆心和半径来绘制的。

语法

下面是<circle>元素的语法声明，这里只给出主要的属性。

<circle
   cx="x轴坐标"
   cy="y轴坐标"
   r="长度" >   
</circle>

animate 动画，放到闭合的曲线内，定义某个属性按时间发生变化

<circle cx="100" cy="100" r="5">
            <animate attributeName="r" attributeType="XML" from="0" to="100" 
dur="5" fill="freeze"> </animate>
        
            <animate attributeName="fill" attributeType="XML" from="red" to="blue" 
dur="5" fill="freeze"> </animate>
</circle>

 属性讲解:

attributeName 要变化的元素属性名称
    a. 可以是元素直接暴露的属性，例如，元素上的x, y,r或者font-size; 
    b. 可以是CSS属性。例如，透明度opacity 
attributeType = "CSS | XML | auto" ,即将变化的属性是哪一类
from 动画值起始值
to 动画值结束值
by 动画值相对结束值
values 多个变化值
begin 动画开始时间，单个值 beigin="3s"：3秒后开始; 多个值：beigin="3s,6s,8s":3秒开始一次，6s开始一次...动画没有执行完也会重头重新执行
end 动画结束时间，值于begin一样，可以参考begin
dur 动画时间长度
repeatCount 动画执行次数:6|indefinite,可以是一个正常次数，也可以是无限循环

效果：

变大+点击平移动画代码：

<animate id="toRight" attributeName="cx" attributeType="XML" from="200" 
to="600" begin="click;toLeft.end" dur="2" fill="freeze"> </animate>

<animate id="toLeft" attributeName="cx" attributeType="XML" from="600" 
to="200" begin="toRight.end" dur="4" fill="freeze"> </animate>

效果：