day03-svg标签

day03

一:SVG(可伸缩矢量图形)

​ 特点：

• 用于网络的矢量图形（高质量的被打印）
• 使用xml格式定义的图形（可以使用文本编辑器来创建和修改）
• 放大或者极度缩小的情况下图形不会失真
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

二：兼容性

​ IE8及以下的浏览器不支持,使用插件（Adobe SVG）可以在IE8运行

三：svg和canvas的区别

• —svg是通过xml语言进行描述的

  —canvas是通过js脚本语言进行绘制的

• —svg图形可以进行动态的修改

  —canvas图形一经绘制，不能改动，否则只有重新绘制

• —svg不依赖电脑的分辨率

  —canvas依赖分辨率

• —svg的每一个元素都可以使用dom事件进行处理，

  —canvas不支持事件处理

四：svg文件在html的使用方式

• embed，iframe标签

  —优点：允许脚本使用

  —缺点：H4和XHTMl中不能使用（H5可以）

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

• object标签

  —优点：H4，H5和XHTMl都可以使用

  —缺点：不允许脚本使用

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

• 使用a标签进行连接

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

• 直接在html中使用

五：svg的使用

1·绘制圆

• circle标签创建一个圆
• stroke：表示绘制边框颜色
• stroke-width：表示边框宽度

• fill：表示填充 颜色
  

• cx，cy表示圆中心的坐标（行内）
• r：表示圆的半径

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
        <!--xmlns：是svg的命名空间
			version表示：使用的svg的版本
			width,height表示：整个svg的绘制区域 （默认300*150）
			-->
        <circle cx="200" cy="200" r="100" stroke="blue" stroke-width="5" fill="yellow" />
     </svg> 

2· 绘制矩形

• rect标签创建矩形

• width,height:定义矩形的高宽

• x: 定义矩形距离浏览器左侧的距离（行内）

• y: 定义矩形距离浏览器上侧的距离（行内）

• rx 和 ry 属性可使矩形产生圆角。（行内）

     #square {
   	stroke: black; 
   	stroke-width: 4px;
   	fill: aqua;
   	fill-opacity:0.3;
}
    <svg xmlns="http://www.w3.org/2000/svg"
       version="1.1" 
       class="all">
   <!--opacity属性定义整个图形的透明度
       fill-opacity属性定义填充透明度
	stroke-opacity 属性定义轮廓透明度（合法的范围是：0 - 1）-->
 <rect id="square" x="20px" y="20px" rx="30px" ry="50px"/>
  </svg>

3·绘制椭圆

• rx：定义水平半径
• ry：定义垂直半径

<svg style="width: 600px; height:600px">
        <ellipse class="tuo" cx="300" cy="80" rx="90" ry="50" />
    </svg>

4·绘制直线

• x1:开始的x坐标
• x2：结束绘制的y坐标
• y1:开始的y坐标
• y2:结束的y坐标

<svg>
        <line x1="50" y1="100" x2="200" y2="50"/>
    </svg>

5·绘制多边形

• polygon 标签是用来绘制多边形的
• 多边形是有直线构成的，封闭的图形
• points：写明每一个点之间的坐标（x，y）

<svg>
        <polygon points="100,200,500,200,200,300,300,100,400,300" fill-rule=”evenodd“/>
    </svg>

• fill-rule：svg图形的填充规则（判断某一区域是否属于内部【内部被填充】）

  —nonzero（从该点做任意方向的射线，路径从左—>右穿过射线，加一；从右—>左穿过射线，减一；结果为0，该点在外部，反之，）

l-rule=”evenodd“/>

- fill-rule：svg图形的填充规则（判断某一区域是否属于内部【内部被填充】）

  —nonzero（从该点做任意方向的射线，路径从左—>右穿过射线，加一；从右—>左穿过射线，减一；结果为0，该点在外部，反之，）

  —evenodd（射线与路径的相交点，奇数在内部，填充）