• 销售:0755-83271919、83271881 服务:0755-83271606、83658105

H5新特性Svg绘图

时间:2018-02-02 09:07:57    查看次数:1421    发布者:管理员

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 作图。因为其清晰度在放大缩小的情况下可以自适应,所以特别适合做响应式的配图,其动画效果也很好的满足了游戏开发的需求。



文章来自网联科技原创,转载请注明:http://old.ni8.com/index.php/about/show_775.html
最新案例MORE
  • 投诉/Suggest:13823188098
  • 电话/Tel:0755-83271881
  • 邮箱/Mail:web@ni8.com
  • 地址/Add:深圳市福田区华强南路机械大厦6楼