您好,欢迎来到舟格财经。
搜索
您的当前位置:首页SVG图形编码_html/css

SVG图形编码_html/css

来源:舟格财经


svg:可以不改变质量的情况下缩放

  1. svg必须有包含
  2. 可以绘制不同的形状矩形:rect,圆形:circle,椭圆:ellipse,线:line,折线:polyline,多边形:polygon,路径:path
  3. 绘制不同的图形则应该使用不同的标签标记如圆形则使用circle
  4. 可以将svg保存为svg格式
  5. x,y表示起始坐标
  6. fill:填充的颜色,stroke:画的颜色,stroke-width:画的宽度(通俗来讲就是边框)
  7. 其实和css3的canvas差不多

矩形:rect

 

圆角矩形:设置rx,ry(圆心的坐标)的值即可

 	

圆形:circle

circle:没有x,y的属性因为已经设置好了圆心cx,cy

 

椭圆:ellipse

ellipse:椭圆其实就是矩形然后边框是圆角

 	 

线段:line(两点确定一条直线)

 

折线:polyline(就是设置多个坐标点)

注意不能使用(0,0)是无效的

  

多边形:polygon

当然更复杂的图形,只要知道各个点的坐标即可

 	  	

路径:path(上面所有的图形 都可以通过path来绘制)

下面的命令可用于路径数据:

  • M = moveto //坐标移动到
  • L = lineto //画到
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc //椭圆
  • Z = closepath //结束路径
  • 注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

    必须按照规则书写

     	

    demo: http://2.liteng.sinaapp.com/svg/index.html

    原文地址url: http://liteng.org/node/51

    Copyright © 2019- zougedi.com 版权所有

    违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务