码迷,mamicode.com
首页 > 其他好文 > 详细

svg的使用

时间:2019-05-22 17:29:31      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:解析   lin   XML   多个   常用   transform   尺寸   http   默认   

<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是相对于自己的中心点

svg的使用

标签:解析   lin   XML   多个   常用   transform   尺寸   http   默认   

原文地址:https://www.cnblogs.com/fanbulaile/p/10906993.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!