原文:突袭HTML5之SVG 2D入门12 - SVG DOM

使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式。由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为SVG DOM。当然了,由于目前IE不支持SVG,开发基于IE的SVG页面需要采用不同的方式。这部分的知识大家其实都很熟悉,下面只是简单的看一下。 HTML页面中的DOM操作 DOM大家应该很熟悉了 ...

2012-07-20 12:48 0 5298 推荐指数:

查看详情

突袭HTML5SVG 2D入门1 - SVG综述

位图与矢量图   以前,浏览器中显示的图形,例如jpeg、gif等,都是位图,这些图像格式是基于光栅的。在光栅图像中,图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图 ...

Thu Mar 15 21:27:00 CST 2012 3 12496
突袭HTML5SVG 2D入门3 - 文本与图像

SVG中渲染文本   SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件。任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行。尽管SVG的文本渲染如此强大,但是还是有一个不足之处:SVG不能执行自动换行。如果文本比允许空间长,则简单 ...

Mon Apr 09 20:50:00 CST 2012 0 8533
突袭HTML5SVG 2D入门4 - 笔画与填充

  前面我们重点都在总结各类形状,文本和图片,接下来,我们还是和讨论canvas一样,总结一下颜色处理,也就是填充和边框效果;你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式 ...

Sat Apr 14 23:03:00 CST 2012 1 6857
突袭HTML5SVG 2D入门5 - 颜色的表示

  SVG和canvas中是一样的,都是使用标准的HTML/CSS中的颜色表示方法,这些颜色都可以用于fill和stroke属性。基本有下面这些定义颜色的方式:1. 颜色名字: 直接使用颜色名字red, blue, black...2. rgba/rgb值: 这个也很好理解,例如#ff0000 ...

Sat Apr 14 23:08:00 CST 2012 2 4558
突袭HTML5SVG 2D入门6 - 坐标与变换

坐标系统  SVG存在两套坐标系统:视窗坐标系与用户坐标系。默认情况下,用户坐标系与视窗坐标系的点是一一对应的,都为原点在视窗的左上角,x轴水平向右,y轴竖直向下;如下图所示:   SVG的视窗位置一般是由CSS指定,尺寸由SVG元素 ...

Mon May 07 21:03:00 CST 2012 1 6953
突袭HTML5SVG 2D入门11 - 动画

交互性 SVG拥有良好的用户交互性,例如:1. SVG能响应大部分的DOM2事件。2. SVG能通过cursor良好的捕捉用户鼠标的移动。3. 用户可以很方便的通过设置svg元素的zoomAndPan属性的值来实现缩放等效果。4. 用户可以很方便的把动画和事件结合起来,完成一些复杂的效果 ...

Wed Jul 04 20:57:00 CST 2012 0 8292
突袭HTML5SVG 2D入门9 - 蒙板

SVG支持的蒙板 SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧。 SVG支持的蒙板类型: 1. 裁剪路径(cliping path) 裁剪路径是由path, text ...

Fri Jun 01 21:22:00 CST 2012 1 4258
突袭HTML5SVG 2D入门8 - 文档结构

前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性。 SVG文档的元素基本可以分为以下几类: 动画元素:animate, animateColor ...

Fri May 18 20:46:00 CST 2012 0 3770
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM