svg初学习(1)

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201507082192.html

 svg: 

基本标签

圆型:

　　 <circle cx='50' cy='50' r='10' stroke='greenyellow' stroke-width='1' stroke-dasharray='50 62.8'></circle>

　　stroke-dasharray两个参数 第一个是虚线长度 第二个是虚线间隔;

矩形:

<svg style="width:100px;height:100px" viewBox='0 0 250 250' xmlns="http://www.w3.org/2000/svg">
        <rect height='250'  width='250' stroke='hotpink' stroke-width='5px' fill='white' ></rect>
</svg>
svg标签 viewBox属性

　　前两个是rect相对于svg盒子的相对移动，一般都是0 0除非你要移动rect的位置 

　　后两个的数值等于rect的大小效果就会好像background-size:contain;

　　注意：当有viewBox的时候stroke-width不会生效?

圆角矩形:rx和ry属性用于决定矩形圆角的大小。rx属性决定圆角的宽度，ry属性则决定圆角的高度。你可以用fill-opacity属性来设置填充矩形的透明度

直线:

　注意:直接位置太远要设定宽高　

　x1和y1属性用于指定直线的起点，x2和y2属性用于指定直线的终点。可以使用style属性来为直线设置颜色和描边宽度。

<svg style='width:300px;height:300px' xmlns="http://www.w3.org/2000/svg">
        <line x1='0' y1='50' x2='30' y2='300' stroke='skyblue'/>
</svg>

 折线:

<svg  xmlns="http://www.w3.org/2000/svg">
        <polyline points='0,0 0,30  40,30' fill='skyblue' />
</svg>

　　

若要三边都描边要加上结束点 points="10,2  60,2  35,52  10,2"

多边形:

　　

<svg  xmlns="http://www.w3.org/2000/svg">
        <polygon points='0,0 0,30  40,30  40,0' fill='skyblue' />
</svg>