2014年7月22日

SVG 2D入门11 - 动画

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

posted @ 2014-07-22 14:58 默默的小柚子阅读(335) 评论(0) 推荐(0)

SVG 2D入门13 - svg对决canvas

摘要：到目前为止，SVG与Canvas的主要特性均已经总结完毕了。它们都是HTML5中支持的2D图形展示技术，而且均支持向量图形。现在，我们就来比对一下这两种技术，分析一下它们的长处和适用场景。首先分析一下两种技术的显著特点，看下面的表格：CanvasSVG基于像素（动态 .png）基于形状单个 H... 阅读全文

posted @ 2014-07-22 14:57 默默的小柚子阅读(338) 评论(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 默默的小柚子阅读(303) 评论(0) 推荐(0)

SVG 2D入门10 - 滤镜

摘要：滤镜称得上是SVG最强大的功能了，它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效。这样你就很容易在客户端生成和修改图像了。而且滤镜并没有破坏原有文档的结构，所以维护性也很好。滤镜用filter元素定义；需要使用的时候，在需要滤镜效果的图形或容器上添加filter属性，引用... 阅读全文

posted @ 2014-07-22 14:54 默默的小柚子阅读(1034) 评论(0) 推荐(0)

SVG 2D入门9 - 蒙板

摘要： SVG支持的蒙板 SVG支持多种蒙板特效，使用这些特性，我们可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了，这里都叫做蒙板吧。SVG支持的蒙板类型： 1. 裁剪路径(cliping path) 裁剪路径是由path, text或者基本图形组成的图形。所有在裁剪路径内... 阅读全文

posted @ 2014-07-22 14:53 默默的小柚子阅读(266) 评论(0) 推荐(0)

SVG 2D入门8 - 文档结构

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

posted @ 2014-07-22 14:52 默默的小柚子阅读(322) 评论(0) 推荐(0)

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

摘要：前面介绍了很多的图形元素，如果很多图形本身是一样的，需要每次都去定义一个新的么？我们能否共用一些图形呢？这是这节的重点 - SVG元素的重用。组合 - g元素 g元素是一种容器，它组合一组相关的图形元素成为一个整体；这样，我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合... 阅读全文

posted @ 2014-07-22 14:51 默默的小柚子阅读(234) 评论(0) 推荐(0)

SVG 2D入门6 - 坐标与变换

摘要：坐标系统 SVG存在两套坐标系统：视窗坐标系与用户坐标系。默认情况下，用户坐标系与视窗坐标系的点是一一对应的，都为原点在视窗的左上角，x轴水平向右，y轴竖直向下；如下图所示： SVG的视窗位置一般是由CSS指定，尺寸由SVG元素的属性width和height设置，但是如果SVG是存储在embed... 阅读全文

posted @ 2014-07-22 14:50 默默的小柚子阅读(493) 评论(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 默默的小柚子阅读(421) 评论(0) 推荐(0)

SVG 2D入门4 - 笔画与填充

摘要：前面我们重点都在总结各类形状，文本和图片，接下来，我们还是和讨论canvas一样，总结一下颜色处理，也就是填充和边框效果；你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式写在元素中，也可以以CSS的形式保存(这是与canvas不一样的地方)。填充色 - fill属性 ... 阅读全文

posted @ 2014-07-22 14:49 默默的小柚子阅读(470) 评论(0) 推荐(0)

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

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

posted @ 2014-07-22 14:46 默默的小柚子阅读(243) 评论(0) 推荐(0)

SVG 2D入门1 - SVG综述

摘要：位图与矢量图以前，浏览器中显示的图形，例如jpeg、gif等，都是位图，这些图像格式是基于光栅的。在光栅图像中，图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图像的再现能力比较强，但是在某些情形下会显得不足。例如，当浏览器以不同大小显示一副图像时，通常会产生锯齿边... 阅读全文

posted @ 2014-07-22 14:43 默默的小柚子阅读(416) 评论(0) 推荐(0)

SVG 2D入门2 - 图形绘制

摘要：基本形状 SVG提供了很多的基本形状，这些元素可以直接使用，这一点比canvas好多了。废话不说了，直接看例子，这个最直接：这段HTML显示的结果如下：这个例子画了很多形状：正常的矩形，带圆角的矩形，圆形，椭圆形，直线，折线，多边形，还有路径。这些都属于基本的图形元素。虽然绘制一个图形有很... 阅读全文

posted @ 2014-07-22 14:03 默默的小柚子阅读(466) 评论(0) 推荐(0)

默默的小柚子程序员的小船说翻咱就翻
博客园首页新随笔联系订阅管理

2014年7月22日

公告