svg
影子丝汀
这个作者很懒,什么都没留下…
展开
-
HTML5之SVG 2D入门4 - 笔画与填充
前面我们重点都在总结各类形状,文本和图片,接下来,我们还是和讨论canvas一样,总结一下颜色处理,也就是填充和边框效果;你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式写在元素中,也可以以CSS的形式保存(这是与canvas不一样的地方)。填充色 - fill属性 这个属性使用设置的颜色填充图形内部,使用很简单,直接把颜色值赋给这个属性就可以了。看例子:<rect转载 2016-08-30 11:59:27 · 892 阅读 · 0 评论 -
HTML5之SVG 2D入门11 - 动画
交互性 SVG拥有良好的用户交互性,例如:SVG能响应大部分的DOM2事件。SVG能通过cursor良好的捕捉用户鼠标的移动。用户可以很方便的通过设置svg元素的zoomAndPan属性的值来实现缩放等效果。用户可以很方便的把动画和事件结合起来,完成一些复杂的效果。通过给SVG元素挂接事件,我们可以使用脚本语言方便的完成一些交互任务。SVG支持大部分的DOM2事件,例如:onfocusi转载 2016-08-31 10:06:02 · 763 阅读 · 0 评论 -
HTML5之SVG 2D入门10 - 滤镜
滤镜称得上是SVG最强大的功能了,它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效。这样你就很容易在客户端生成和修改图像了。而且滤镜并没有破坏原有文档的结构,所以维护性也很好。 滤镜用filter元素定义;需要使用的时候,在需要滤镜效果的图形或容器上添加filter属性,引用相关滤镜即可。 滤镜元素包含很多的滤镜原子操作;每个原子操作在传入的对象上执行转载 2016-08-31 09:48:56 · 1389 阅读 · 0 评论 -
HTML5之SVG 2D入门8 - 文档结构
前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性。SVG文档的元素基本可以分为以下几类:•动画元素:animate, animateColor, animateMotion, animateTransform, set; •解释元素:desc, metadata, title; •图形元素:circle转载 2016-08-30 18:20:26 · 835 阅读 · 0 评论 -
HTML5之SVG 2D入门7 - 重用与引用
前面介绍了很多的图形元素,如果很多图形本身是一样的,需要每次都去定义一个新的么?我们能否共用一些图形呢?这是这节的重点 - SVG元素的重用。 组合 - g元素g元素是一种容器,它组合一组相关的图形元素成为一个整体;这样,我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合使用,提供文档的结构信息。结构良好的文档通常可读性和渲染效率都不错。看一个小例子:<svg xmlns=转载 2016-08-30 17:07:12 · 1487 阅读 · 0 评论 -
HTML5之SVG 2D入门6 - 坐标与变换
坐标系统 SVG存在两套坐标系统:视窗坐标系与用户坐标系。默认情况下,用户坐标系与视窗坐标系的点是一一对应的,都为原点在视窗的左上角,x轴水平向右,y轴竖直向下;如下图所示: SVG的视窗位置一般是由CSS指定,尺寸由SVG元素的属性width和height设置,但是如果SVG是存储在embedded对象中(例如object元素,或者其他SVG元素),而且包含SVG的文档是用CSS或者XSL转载 2016-08-30 16:36:49 · 1484 阅读 · 0 评论 -
HTML5之SVG 2D入门5 - 颜色的表示
SVG和canvas中是一样的,都是使用标准的HTML/CSS中的颜色表示方法,这些颜色都可以用于fill和stroke属性。 基本有下面这些定义颜色的方式: 1. 颜色名字: 直接使用颜色名字red, blue, black… 2. rgba/rgb值: 这个也很好理解,例如#ff0000,rgba(255,100,100,0.5)。 3. 十六进制值: 用十六进制定义的颜色,例如#fff转载 2016-08-30 15:17:22 · 2076 阅读 · 0 评论 -
HTML5之SVG 2D入门2 - 图形绘制
基本形状 SVG提供了很多的基本形状,这些元素可以直接使用,这一点比canvas好多了。废话不说了,直接看例子,这个最直接:<svg width="200" height="250"> <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <rect转载 2016-08-30 11:18:07 · 628 阅读 · 0 评论 -
HTML5学习 - 管中窥豹
前面已经学习了WebSocket与canvas的内容,这里大略看一下HTML5的主体特性,理清以后的学习方向。HTML5是一个逐渐发展的标准,所以没有那一款浏览器完全支持所有的特性,但是总的来说,最新的Chrome、Firefox、Opera几款浏览器支持的最好;而且每个特性将来也可能会出现一些小的变化。HTML5的特性主要表现在下面几个方面。规则的变化 HTML5制定了更加松散的文档规则,同转载 2016-08-30 10:18:47 · 429 阅读 · 0 评论 -
HTML5之SVG 2D入门1 - SVG综述
位图与矢量图 以前,浏览器中显示的图形,例如jpeg、gif等,都是位图,这些图像格式是基于光栅的。在光栅图像中,图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图像的再现能力比较强,但是在某些情形下会显得不足。例如,当浏览器以不同大小显示一副图像时,通常会产生锯齿边缘,这时,浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值;这样会导致图像失真。此外,针对位图转载 2016-08-30 10:26:54 · 477 阅读 · 0 评论 -
HTML5之SVG 2D入门3 - 文本与图像
SVG中渲染文本 SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件。任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行。尽管SVG的文本渲染如此强大,但是还是有一个不足之处:SVG不能执行自动换行。如果文本比允许空间长,则简单地将它切断。多数情况下,创建多行文本需要多个文本元素。 此外,可以使用 tspan 元素可以将文本元素分转载 2016-08-30 11:39:52 · 597 阅读 · 0 评论 -
HTML5之SVG 2D入门13 - svg对决canvas
到目前为止,SVG与Canvas的主要特性均已经总结完毕了。它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形。现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景。 首先分析一下两种技术的显著特点,看下面的表格: Canvas SVG 基于像素(动态 .png) 基于形状 单个 HTML 元素 多个图形元素,这些元素成为 DOM 的一部分 仅通过转载 2016-08-31 10:51:41 · 716 阅读 · 0 评论