• svg 的一些用法讲解及梳理总结


    在运用了一些SVG技术之后,对它进行一定的梳理,目录如下:

    1、SVG是什么?

    2、SVG和Canvas有什么区别

    3、SVG的支持情况

    4、SVG的几种基本图形

    5、SVG在移动端的一些使用技巧

    6、引申高度:SVG对于前端工程师的重要性

    首先,我们来说下SVG是什么,名称的全拼是可缩放矢量图形(Scalable Vector Graphics),官方的解释是SVG是基于XML来描述二维图形和绘制程序的语言,它有几个特点,一:它是矢量的,在放大和缩小的情况下不会变形,二:它是用XML格式来绘制的;XML是什么,它是被设计用来传输和储存数据的一种可标记语言,简单点来说就是用规则允许内用自己设计的标签来储存数据用的

    那么它和Canvas有什么区别呢,个人认为最大的不同就是在于绘制方式的不同,一个是用XML来绘制的,一个是用js来绘制的,js依赖像素,所以Canvas图形依赖屏幕分辨率,图形在不同的屏幕下可能有不同程度的失真,官方的解释更为全面一些,参考网址:http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp;

    SVG图形基于矢量的特点一定会被广泛的应用,那么它的支持情况怎样呢,SVG支持IE9及其以上和现代所有的浏览器,而且是可以直接镶嵌在h5页面当中的,也就是<!DOCTYPE html>标记的,这里特别提示一些命名空间的概念,也就是SVG的xmlns属性,命名空间就是一套标准,就是该元素的所有内容都是用这个空间的标准来解析;但是看到张大大的一篇文章说在火狐浏览器上有一些bug,本人没有测试过,附上原文链接一睹bug壮观,http://www.zhangxinxu.com/wordpress/2012/08/svg-feature-support-bugs/

    SVG有七种基本图形,分别为矩形、圆形、椭圆、线、折线、多边形、路径,一些简单的图形可以使直接用这些预定义好的标签,当然这些图形都是可以使用路径来实现的,对于路径的书写来说,它是由几个命令控制的,分别是M、L、H、V、C、S、Q、T、A、Z,命令很多,但是对于绘制一些基本的图形来说,有很多是我们并不需要的,参考网址:http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/

    SVG它是有一个默认的宽高的,所以,在使用的时候可以适当的更改,拿在移动端的实例来说,我要做一个上边凹形,下边平行的形状,这个时候就要更改下他的宽高,而且移动端的屏幕一般都不是很大,一个图形是很占据地方的,所以,对于位置是一定要把握很精准的,可以使用rem这个单位,而且对于绘制的图形的那些点来说,CSS是不适合的,因为在屏幕的宽度改变的时候,会出现很难看的情况,比如说下面的情况:

    所以,在书写他们的那些点的时候,可以使用js来定义位置,这样就可以解决问题了

    最后最后,对于一个前端工程师来说,绘制图形真的是一个非常重要的技术能力,与诸君共勉之。

  • 相关阅读:
    win10与ubuntu下演示运行.net core rc2 1.0.0.3002702程序
    win10系统iis下部署搭建https (ssl/tls)本地测试环境
    HTTP 错误 500.19
    win8.1安装Team Function Server 2013
    WCF在编译出现 “错误 3 命令“时解决
    EXCEL中,在其中列 前面or后面加一个“元”字的技巧
    职业经理感言一
    工作小应用:EXCEL查找两列重复数据
    C#设置与获取目录权限(.net控制ACL)
    WPF中窗口控件的跨线程调用
  • 原文地址:https://www.cnblogs.com/zxn-9588/p/8630514.html
Copyright © 2020-2023  润新知