囫囵吞枣——SVG

什么是SVG

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

在xml中定义图形    (在HTML中直接显示)

<?xml version="1.0" standalone="no"?>                                   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">        重点！开始画图。   version是版本号，网址是固定的，引用VSG的网站   
  <circle cx="100" cy="50" r="40" stroke="black"                      cx 和 cy 属性定义圆中心的 x 和 y 坐标      r 半径  （如没设置轴，默认（0，0））      stroke边框颜色
  stroke-width="2" fill="red" />                                                     fill是背景颜色      stroke-width边框厚度设置 
</svg>

  实例

HTML5可以使用SVG的标签

• <embed>   语法：<embed src="circle1.svg" type="image/svg+xml" />
• <object>    语法：<object data="circle1.svg" type="image/svg+xml"></object>
• <iframe>    语法：<iframe src="circle1.svg"></iframe>
• <a>             语法：<a href="circle1.svg">使用a标签链接</a>

SVG形状

• 矩形 <rect>   
• 圆形<circle>
• 椭圆<ellipse>
• 线<line>
• 折线<polyline>       
• 多边形<polygon>    
• 路径<path>    不能理解，到深究。
• 文本<text>
  • <tspan> </tspan>指定标签(类似于p标签)。设置固定位置。
  • 例子：
  • 效果：

关于SVG的样式

    通用样式

• style属性用来定义CSS属性
• CSS的fill属性定义矩形的填充颜色
• CSS的stroke-width属性定义矩形边框的宽度
• CSS的stroke属性定义矩形边框的颜色
• CSS的fill-opacity属性定义填充（背景）颜色透明度（合法的范围是0-1）
• CSS的stroke-opacity属性定义笔触颜色的透明度（我的理解是边框）合法的范围是0-1
• 整个元素的透明度 opacity  合法范围是0-1

      矩形样式

• • x定义矩形到浏览器窗口的距离
  • y定义矩形到顶端位置的距离
  • rect元素定义宽和高属性可以定义高和宽（矩形）
  • rx 和 ry 属性可使矩形产生圆角

      圆形样式

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

      椭圆样式

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

      直线样式

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

       多边形样式

• points 属性定义多边形每个角的 x 和 y 坐标
• 例：要多少个角就加多少对值
• fill-rule:nonzero （默认值）| evenodd | inherit；  不能理解。有知道的，麻烦告知。不胜感激。

      曲线样式

•   points 属性来创建曲线，创建任何只有直线的形状：  用法同多边形。

SVG滤镜                                 ——————————————————————————未研究

SVG模糊   

  代码如下： 

             

效果如下：（超好看！！！）

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

代码块：

1.     2是添加阴影   dx  dy  是阴影偏移的位置。

        3是这是模糊背景，颜色为blurOut，背景模糊级别为10

        4前置块

                                               ————————————未完待续。