【SVG 2D入门1 - SVG综述】的更多相关文章

突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz

以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzier(p0,p1,p2,t){ var x = (1 - t) * (1 - t) * p0[0] + 2 * t * (1 - t) * p1[0] + t * t * p2[0]; var y = (1 - t) * (1 - t) * p0[1] + 2 * t * (1 - t) * p1[…

SVG 2D入门1 - SVG综述

位图与矢量图 以前,浏览器中显示的图形,例如jpeg.gif等,都是位图,这些图像格式是基于光栅的.在光栅图像中,图像文件定义了图像中每个像素的颜色值.浏览器需要读取这些值并做出相应行动.这种图像的再现能力比较强,但是在某些情形下会显得不足.例如,当浏览器以不同大小显示一副图像时,通常会产生锯齿边缘,这时,浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值:这样会导致图像失真.此外,针对位图进行动画,最多也仅限于生成“翻动书本”类型的动画,即快速连续地显示单独图像. 矢量图通过指定为确定每…

SVG 2D入门13 - svg对决canvas

到目前为止,SVG与Canvas的主要特性均已经总结完毕了.它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形.现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景.首先分析一下两种技术的显著特点,看下面的表格: Canvas SVG 基于像素(动态 .png) 基于形状 单个 HTML 元素 多个图形元素,这些元素成为 DOM 的一部分 仅通过脚本修改 通过脚本和 CSS 修改 事件模型/用户交互颗粒化 (x,y) 事件模型/用户交互抽象化 (rect, path) 图面…

SVG 2D入门12 - SVG DOM

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

SVG Sprite 入门（SVG图标解决方案）

关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了.这篇文章主要说明svg图标的使用和制作. 演示地址 代码 SVG Sprite 传统的做法 使用AI或者合并SVG图像,然后用background-postion; 打开AI,新建一个30 * 60(px)的画布,设置好网格和参考线. 用AI打开svg文件,然后复制路径到画布上调整大小 其他就和css-sprite…

SVG 2D入门11 - 动画

交互性      SVG拥有良好的用户交互性,例如:1. SVG能响应大部分的DOM2事件.2. SVG能通过cursor良好的捕捉用户鼠标的移动.3. 用户可以很方便的通过设置svg元素的zoomAndPan属性的值来实现缩放等效果.4. 用户可以很方便的把动画和事件结合起来,完成一些复杂的效果. 通过给SVG元素挂接事件,我们可以使用脚本语言方便的完成一些交互任务.SVG支持大部分的DOM2事件,例如:onfocusin, onfocusou, onclick, onmousedown, o…

SVG 2D入门8 - 文档结构

前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性. SVG文档的元素基本可以分为以下几类: 动画元素:animate, animateColor, animateMotion, animateTransform, set: 解释元素:desc, metadata, title: 图形元素:circle, ellipse, line, path, polygon, polyline, rect: 结构元素…

SVG 2D入门7 - 重用与引用

前面介绍了很多的图形元素,如果很多图形本身是一样的,需要每次都去定义一个新的么?我们能否共用一些图形呢?这是这节的重点 - SVG元素的重用. 组合 - g元素      g元素是一种容器,它组合一组相关的图形元素成为一个整体:这样,我们就可以对这个整体进行操作.这个元素通常可以和desc和title元素配合使用,提供文档的结构信息.结构良好的文档通常可读性和渲染效率都不错.看一个小例子: <svg xmlns="http://www.w3.org/2000/svg"      …

SVG 2D入门3 - 文本与图像

SVG中渲染文本 SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件.任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行.尽管SVG的文本渲染如此强大,但是还是有一个不足之处:SVG不能执行自动换行.如果文本比允许空间长,则简单地将它切断.多数情况下,创建多行文本需要多个文本元素. 此外,可以使用 tspan 元素可以将文本元素分成几部分,允许每部分有各自的样式. 还有,在text元素中,空格的处理与HTML类似:换行和回车变成空格,…

SVG 2D入门10 - 滤镜

滤镜称得上是SVG最强大的功能了,它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效.这样你就很容易在客户端生成和修改图像了.而且滤镜并没有破坏原有文档的结构,所以维护性也很好.      滤镜用filter元素定义:需要使用的时候,在需要滤镜效果的图形或容器上添加filter属性,引用相关滤镜即可.      滤镜元素包含很多的滤镜原子操作:每个原子操作在传入的对象上执行一个基本的图形操作,并产生图形输出.大多数的原子操作生成的结果基本都是一个RGBA图片.每个原子操作的输入…