SVG从入门到放弃（1）-- 基本图形使用

这节主要介绍SVG中常用的一些基本图形及其使用方法

一、内置图形:

rect(矩形)    
circle(圆)  
ellipse(椭圆)   
line(直线)   
polyline(折线)  
polygon(多边形)  
path(路径)

二、内置图形的html属性或(css样式):

fill(填充颜色)   
fill-opacity(填充透明度)
stroke(边框颜色)   
stroke-width(边框宽度)   
stroke-opacity(边框透明度)   
stroke-dasharray(创建虚线)
transform(变换)
filter(滤镜)(url[#滤镜id)]

三、常见图形用法

1、矩形

基本用法：

<rect x="0" y="0" width="100" height="100" fill="#f06"/> 
<!--x表示横坐标，y表示纵坐标，width表示宽，height表示高-->

扩展用法：

<rect x="50" y="20" width="150" height="150"
      style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
 
<rect x="50" y="20" width="150" height="150"
      fill="red" stroke="blue" stroke-width="20" fill-opacity="1" stroke-opacity="0.1"/>

2、圆

基本用法：

<circle cx="100" cy="50" r="100" fil='#f06'/>            
<!-- cx表示圆心横坐标，cy表示圆心纵坐标，r表示半径 -->

扩展用法：

<circle cx="100" cy="50" r="40" 
        style="stroke:blue;stroke-width:10;fill:pink"/>
 
<circle cx="100" cy="50" r="40" 
        stroke="black" stroke-width="2" fill="red"/>

3、椭圆

基本用法：

<ellipse cx="300" cy="80" rx="150" ry="100" fill='#f06'/>  
<!-- cx表示圆心横坐标，cy表示圆心纵坐标，rx表示横向半径，ry表示纵向半径 -->

 扩展用法：

<ellipse cx="300" cy="80" rx="100" ry="50" 
         style="fill:yellow;stroke:purple;stroke-width:2" />
 
<ellipse cx="300" cy="80" rx="100" ry="50" 
         fill="pink" stroke="red" stroke-width="2"/>

 4、直线

 基本用法：

<line x1="0" y1="100" x2="100" y2="0"/>    
<!-- x1起点横坐标，y1表示起点纵坐标，x2表示终点横坐标，y2表示终点纵坐标 -->

扩展用法：  

<line x1="0" y1="0" x2="200" y2="200"
      style="stroke:rgb(255,0,0);stroke-width:2"/>
 
<line x1="0" y1="0" x2="200" y2="200" 
      stroke="red" stroke-width="10"/>

 5、多边形

基本用法：

<polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>         
<!-- 200,10为第一个点   250,190为第二个点  160,210为第三个点 -->

扩展用法： 

<polygon points="200,10 250,190 160,210" 
         style="fill:lime;stroke:purple;stroke-width:1" />
 
<polygon points="200,10 250,190 160,210"
         fill="red" stroke="blue" stroke-width="1" />

6、折线

基本用法：

<polyline points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>

 扩展用法：

<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" 
          style="fill:none;stroke:red;stroke-width:4" /> 
<!--此处将fill设置为none，可以仅仅画曲线，而如果fill有值，则会形成由曲线围城的多边形-->
    
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" 
          style="fill:blue;stroke:red;stroke-width:4" />

 第一个点不会和最后一个点连起来，不会闭合

下一节介绍SVG中路径path的详细用法（路径是svg中最强大的图形）