H5新特性Svg绘图
时间:2018-02-02 09:07:57 查看次数:1421 发布者:管理员
SVG可缩放矢量图形(ScalableVector Graphics)。与我们常用的jpeg、png格式的位图格式不同,这种格式的图片在放大达到一定的倍数之后,就能看到一个个的小方块,图片整体在视觉上就模糊了,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 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
网站建设知识
- 手机网站制作的重要性
2018-11-05 - 商城网站建设需要注意哪些
2018-10-22 - 深圳做网站公司--------首选网联科技
2018-09-30 - 2018年最值得学习的前端技术
2018-09-25 - 为什么做网站必须选择做响应式网站
2017-08-26 - 深圳网站建设哪家好
2017-08-04
咨询
电话:0755-83658105
邮箱:web@ni8.com
网联新闻
MORE- 网联科技2018年员工聚餐2018-08-21
- 网联科技温泉漂流2日游2018-08-13
- 网联科技2018年员工夏季生日会2018-07-19
- 红树林-深圳湾海边徒步活动2018-04-10
- 网联科技2018年春节放假通知2018-02-06
- 一场属于网联人的活动日2017-03-14