当前位置:
首页 / 资讯 / 技术文章

H5新特性Svg绘图

2018-02-02管理员发布者:平台标签:

SVG可缩放矢量图形(ScalableVector Graphics)。与我们常用的jpegpng格式的位图格式不同,这种格式的图片在放大达到一定的倍数之后,就能看到一个个的小方块,图片整体在视觉上就模糊了,SVG格式的图片无论放大缩小都可以保证清晰度不变。

那么SVG有哪些特点呢?

1.      基于SVG的图像尺寸不限于固定的大小,可以升级到不同的现实分辨率。

2.      同一段SVG内容可以被灵活的运用在其它SVG图像中。

3.      动态交互性,利用dom的接口编程可实现响应各种高亮,声效,特效动画操作等,SVG定义了丰富的事件,可以满足动画效果的需求。

4.      文本的独立性,SVG图像中的文字独立于图像,可以被独立操作,以及被搜索引擎读取。

5.      SVG具备1600万色彩的调色板,支持ICC标准,RGB,线性填充和遮罩。

6.      SVG是基于XML的纯文本格式,通过XML传递数据,不受空间,设备,平台的限制。
svg图片

SVG的应用

Svg提供了基本的图形元素,如线段,矩形,椭圆,折线等通过路径元素表现出来,基于坐标系统进行平移,伸缩,旋转等变化,通过色彩填充及滤镜对图片进行加工。并使用svg特有的动画标签实现动画效果。

实例介绍

<svg width="100%"height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<radialGradientid="grey_blue" cx="50%" cy="50%"r="50%"

fx="50%" fy="50%">

<stop offset="0%"style="stop-color:rgb(200,200,200);

stop-opacity:0"/>

<stop offset="100%"style="stop-color:rgb(0,0,255);

stop-opacity:1"/>

</radialGradient>

</defs>

 

<ellipse cx="230"cy="200" rx="110" ry="100"

style="fill:url(#grey_blue)"/>

 

</svg>

代码图片效果:

图片

上面这段代码的意思就是定义一个svg画布宽高为100%,画一个一定规格的椭圆,由椭圆中心点开始一个放射性的渐变,并进行图片透明度的处理。

Svg图片除了用代码的形式进行编辑外,还可以使用绘图工具Adobe Illustrator 作图。因为其清晰度在放大缩小的情况下可以自适应,所以特别适合做响应式的配图,其动画效果也很好的满足了游戏开发的需求。

扫二维码与项目经理沟通

我们在微信上24小时期待您的声音

解答:网站建设、APP开发、小程序开发

网联科技是一家以提供网站建设、APP、小程序开发、CRM系统开发为主的互联网开发公司。以客户需求为导向,客户利益为出发点,结合自身设计及专业建站优势,为客户提供从基础建设到营销推广的一整套解决方案,探索并实现客户商业价值较大化,为所有谋求发展的企业贡献全部力量。

网联科技微信公众号

相关信息