svg的使用

Posted 2021-12-02 fanbulaile

<svg width=‘‘ height=‘ ‘ viewBox=‘0,0,100,100‘ version=‘1.1‘ xmlns="http://www.w3.org/2000/svg"> <!-- xmlns最好不要省略，解析编码 -->

</svg>

 viewBox=(x,y,w,h) ===>x和y是相对于svg的左上角定义位置起点，w和h相对于定义的svg宽高，如果是100，就是等于width

常用形状：

1.圆形<circle cx=‘中心点x位置‘ cy =‘中心点y值‘ r=‘半径‘/>

2.矩形<rect x=‘矩形左上角位置‘ y=‘矩形右上角位置‘ rx=‘圆角的x方位半径,默认为0‘ ry=‘圆角的y方位半径，默认为0‘ width=‘‘ height=‘‘>

3.椭圆<ellipse cx=‘‘ cy=‘‘ rx=‘椭圆x轴半径‘ ry=‘椭圆y轴半径‘>

4.线<line x1=‘‘ y1=‘‘ x2=‘‘ y2=‘‘/>

 

svg图形上色

fill：内部填充颜色

stroke:给图形描边

         stroke-width:描边宽度    

         stroke-dasharray:‘num’    虚线模式         表示描边的线长度 由1个或多个num长的线组成，每个间距也是num,如果num够长，也可以一个就填满真个描边的线

                                     ‘num1 num2’                如果是多个值，一个是长度，一个是间距，直至填满描边的线

         stroke-dashoffset属性用来设置虚线模式距离路径起始位置的偏移尺寸

         stroke-linecap:butt/square/round         描边的线，两线头样式 ,butt和square差不多，round是有弧形的线头

     

 

注意点：

svg可以使用css3中的transform，不过svg的transform是相对于左上角，而平常用的transform是相对于自己的中心点