会员
周边
众包
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
默默的小柚子
程序员的小船说翻咱就翻
博客园
首页
新随笔
联系
订阅
管理
2014年7月22日
SVG 2D入门11 - 动画
摘要: 交互性 SVG拥有良好的用户交互性,例如:1. SVG能响应大部分的DOM2事件。2. SVG能通过cursor良好的捕捉用户鼠标的移动。3. 用户可以很方便的通过设置svg元素的zoomAndPan属性的值来实现缩放等效果。4. 用户可以很方便的把动画和事件结合起来,完成一些复杂的效果。 通过给S...
阅读全文
posted @ 2014-07-22 14:58 默默的小柚子
阅读(324)
评论(0)
推荐(0)
编辑
SVG 2D入门13 - svg对决canvas
摘要: 到目前为止,SVG与Canvas的主要特性均已经总结完毕了。它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形。现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景。首先分析一下两种技术的显著特点,看下面的表格:CanvasSVG基于像素(动态 .png)基于形状单个 H...
阅读全文
posted @ 2014-07-22 14:57 默默的小柚子
阅读(314)
评论(0)
推荐(0)
编辑
SVG 2D入门12 - SVG DOM
摘要: 使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式。由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为SVG DOM。当然了,由于目前IE不支持SVG,开发基于IE的SVG页面需要采用不同的方式。...
阅读全文
posted @ 2014-07-22 14:57 默默的小柚子
阅读(275)
评论(0)
推荐(0)
编辑
SVG 2D入门10 - 滤镜
摘要: 滤镜称得上是SVG最强大的功能了,它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效。这样你就很容易在客户端生成和修改图像了。而且滤镜并没有破坏原有文档的结构,所以维护性也很好。 滤镜用filter元素定义;需要使用的时候,在需要滤镜效果的图形或容器上添加filter属性,引用...
阅读全文
posted @ 2014-07-22 14:54 默默的小柚子
阅读(1008)
评论(0)
推荐(0)
编辑
SVG 2D入门9 - 蒙板
摘要: SVG支持的蒙板 SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧。SVG支持的蒙板类型: 1. 裁剪路径(cliping path) 裁剪路径是由path, text或者基本图形组成的图形。所有在裁剪路径内...
阅读全文
posted @ 2014-07-22 14:53 默默的小柚子
阅读(258)
评论(0)
推荐(0)
编辑
SVG 2D入门8 - 文档结构
摘要: 前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性。 SVG文档的元素基本可以分为以下几类:动画元素:animate, animateColor, animateMotion, animateTransf...
阅读全文
posted @ 2014-07-22 14:52 默默的小柚子
阅读(296)
评论(0)
推荐(0)
编辑
SVG 2D入门7 - 重用与引用
摘要: 前面介绍了很多的图形元素,如果很多图形本身是一样的,需要每次都去定义一个新的么?我们能否共用一些图形呢?这是这节的重点 - SVG元素的重用。组合 - g元素 g元素是一种容器,它组合一组相关的图形元素成为一个整体;这样,我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合...
阅读全文
posted @ 2014-07-22 14:51 默默的小柚子
阅读(215)
评论(0)
推荐(0)
编辑
SVG 2D入门6 - 坐标与变换
摘要: 坐标系统 SVG存在两套坐标系统:视窗坐标系与用户坐标系。默认情况下,用户坐标系与视窗坐标系的点是一一对应的,都为原点在视窗的左上角,x轴水平向右,y轴竖直向下;如下图所示: SVG的视窗位置一般是由CSS指定,尺寸由SVG元素的属性width和height设置,但是如果SVG是存储在embed...
阅读全文
posted @ 2014-07-22 14:50 默默的小柚子
阅读(428)
评论(0)
推荐(0)
编辑
SVG 2D入门5 - 颜色的表示
摘要: SVG和canvas中是一样的,都是使用标准的HTML/CSS中的颜色表示方法,这些颜色都可以用于fill和stroke属性。基本有下面这些定义颜色的方式:1. 颜色名字: 直接使用颜色名字red, blue, black...2. rgba/rgb值: 这个也很好理解,例如#ff0000,rgb...
阅读全文
posted @ 2014-07-22 14:49 默默的小柚子
阅读(388)
评论(0)
推荐(0)
编辑
SVG 2D入门4 - 笔画与填充
摘要: 前面我们重点都在总结各类形状,文本和图片,接下来,我们还是和讨论canvas一样,总结一下颜色处理,也就是填充和边框效果;你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式写在元素中,也可以以CSS的形式保存(这是与canvas不一样的地方)。填充色 - fill属性 ...
阅读全文
posted @ 2014-07-22 14:49 默默的小柚子
阅读(447)
评论(0)
推荐(0)
编辑
SVG 2D入门3 - 文本与图像
摘要: SVG中渲染文本 SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件。任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行。尽管SVG的文本渲染如此强大,但是还是有一个不足之处:SVG不能执行自动换行。如果文本比允许空间长,则简单地将它切...
阅读全文
posted @ 2014-07-22 14:46 默默的小柚子
阅读(230)
评论(0)
推荐(0)
编辑
SVG 2D入门1 - SVG综述
摘要: 位图与矢量图 以前,浏览器中显示的图形,例如jpeg、gif等,都是位图,这些图像格式是基于光栅的。在光栅图像中,图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图像的再现能力比较强,但是在某些情形下会显得不足。例如,当浏览器以不同大小显示一副图像时,通常会产生锯齿边...
阅读全文
posted @ 2014-07-22 14:43 默默的小柚子
阅读(375)
评论(0)
推荐(0)
编辑
SVG 2D入门2 - 图形绘制
摘要: 基本形状 SVG提供了很多的基本形状,这些元素可以直接使用,这一点比canvas好多了。废话不说了,直接看例子,这个最直接: 这段HTML显示的结果如下: 这个例子画了很多形状:正常的矩形,带圆角的矩形,圆形,椭圆形,直线,折线,多边形,还有路径。这些都属于基本的图形元素。虽然绘制一个图形有很...
阅读全文
posted @ 2014-07-22 14:03 默默的小柚子
阅读(439)
评论(0)
推荐(0)
编辑
公告