你知道什么是SVG吗?分分钟教会你



 





今天我们分享的是关于SVG的基础知识。SVG是可缩放矢量图形,可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。SVG的出现带来了一次技术革命。利用SVG能够创建更加丰富多彩的信息可视化和交互性的应用,尤其是可以创建具有动态的、数据驱动的、交互式图形、图像。另外,由于是纯文本格式的.SVG比传统的图形、图像格式如GIF和JPEG占用更少的空间。





简单来讲,随着HTML5的兴起,Canvas和SVG是HTML5中主要的2D图形技术,前者提供画布标签和绘制API,后者是一整套独立的矢量图形语言,成为W3C标准已经有十多年(2003.1至今),总的来说,Canvas技术较新,从很小众发展到广泛接受,注重栅格图像处理,SVG则历史悠久,很早就成为国际标准,复杂,发展缓慢(Adobe SVG Viewer近十年没有大的更新)。Canvas和SVG比较如下图:





Canvas提供的功能更原始,适合像素处理,动态渲染和大数据量绘制。SVG功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景。今天我们要介绍的就是SVG,如果你的工作大多是开发应用系统,有很多要利用图形展示数据的场景,此时使用SVG再好不过了。



今天我来讲一下关于使用SVG画图的一些基本知识。svg主要通过两种方式呈现在浏览器里,一种是内嵌在html中,一种是独立的svg文件,两者都可以用浏览器打开看,这里我们演示第一种,将svg嵌套在html中,因为我们还要利用JavaScript写一些脚本来控制svg。



我们通过看截图看一下咱们这个DEMO要演示哪些东西(参考了慕课网SVG教程)





在这个页面中,我们将左侧的工具来放在了一个DIV里,右面就是我们的SVG的画布。我们通过左侧的工具栏可以创建矩形,圆形等图形,然后通过图形变化和移动改变图形的一些样式。其中几个比较实用的像旋转,缩放等。



第一步,我们需要搞个工程,建议用webstorm工具,引入jQuery,因为之后我们可能需要用到一些操作dom的方法,用jquery比较方便。接下来我们开始进入正题:



1、创建SVG画图





通过createSVG方法来创建我们的svg画布,通过createElementNS方法。创建出来的SVG其实就是一个DMO节点,给他设置相关属性,并嵌套在canvas这个DIV中。另外我们给这个SVG设置了一个onmouseup的事件,当鼠标抬起时触发selectAreaRemove方法。





在svg中,我们基本都会使用这个方法来创建SVG以及他的图形。创建完成后,当我们点击矩形、圆形、椭圆、直线的时候,能够帮助我们创建对应的图形,这些图形是我们在做svg画图时经常用到的,所以这里我们案例体现了一下。



2、创建图形





如此,这样我们的图形就能显示在SVG里了,通过浏览器我们看一下源代码,当我们添加一个矩形到SVG中时,源代码是这样的:



代码再截取一次:





我们发现svg中出现了一个rect的节点,结点中有transform属性(位移,旋转,大小) class属性 x代表坐标x y代表坐标y width代码长度 height代表宽度 rx ry 属性可使矩形产生圆角。其他的图形就不截图了。



这样我们第一个功能完成,现在我们要做就是通过滑动左侧的旋转,和缩放来实现图形的旋转和缩放功能。首先我们看一下工具栏怎么定义的:





工具栏就是html提供的input 只不过它的type是range 可以设置最大最小值默认值,我们通过监听这个组件来获取要旋转或者缩放的数值,然后通过一些方法来改变图形的变化,我们监控tranForm,一旦他发生了变化,我们则调用:





其中关于旋转,缩放,位移的核心操作是:selected.setAttribute('transform',encodeTransform(t)); 我们通过encodeTransform方法获取当前的变化的值,进行了一些包装,这个包装就是将参数进行格式化(封装成svg能读懂的格式,具体代码如下):





其中,如果我们想让图形发生位移,则修改他的translate属性的值,如果我们想让它发生旋转就修改rotate的值,如果我们想让他发生缩放就修改scale的值。当然这些比较容易实现的。



这次分享的内容比较少,也不够详细请见谅,这块我后续会再仔细补充下。明天我将分享的内容是《Java入行5年明白的10个问题》敬请期待。





 


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

安徽中源管业|安徽中源管业,安徽中源管业mpp电力管,安徽中源管业cpvc电力管,安徽中源管业pe穿线管,安徽中源管业电力管,安徽中源管业排水管,安徽中源管业通信管,安徽中源管业管材
安徽中源管业
易捷尔单招|易捷尔单招,易捷尔单招培训,易捷尔单招报名,易捷尔单招考试,易捷尔单招培训学校,易捷尔单招分数
易捷尔单招
卓越综合高中|卓越综合高中
卓越综合高中
弥勒综合高中|弥勒综合高中
弥勒综合高中
国家开放大学|国家开放大学报名,国家开放大学报考,国家开放大学,什么是国家开放大学,国家开放大学学历,国家开放大学学费,国家开放大学报名条件,国家开放大学报名时间,国家开放大学学历,国家开放大学专业
国家开放大学
昆明综合高中|昆明综合高中
昆明综合高中
自考本科|自考本科有用吗,自考文凭,自考本科文凭,自考文凭有用吗,自考本科文凭有用吗,自考文凭承认吗
自考本科
金诺幼儿园(春城路金诺幼儿园)|昆明官渡区幼儿园,幼儿园报名,官渡区幼儿园,春城路幼儿园,幼儿园招生,学前班,昆明幼儿园,金诺幼儿园,环城南路幼儿园,石井路幼儿园
金诺幼儿园(春城路金诺幼儿园)

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部