Category: Div / Css / XML / HTML5 / SVG
相信大家都见到过这样神奇的技术:一副线条构成的画能自动画出自己。非常的酷。Jake Archibald是这种SVG技术的首创者,并且写了一篇非常好的文章来描述它是如何实现的。Brian Suda也在24 Ways网站上讨论过它。 Polygon使用它在一篇设计方面的文章里创造出了非常神奇的效果。Codrops也做出了一些非常漂亮的例子。
其实我没有什么好增补的,只是想把这种技术说的更明白些,所以,在这里我要用我的方式把这种技术再讲解一遍。
1. 你有一个SVG图形
2. 这个图形必须要有一个线条(stroke)属性
3. 线条可以是虚线
我们可以用Illustrator制作,也可以用编程实现。我们用CSS来设置这些路…
Read More
SVG元素可以像HTML元素一样,使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。
SVG元素可以像HTML元素一样,使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。
大多数情况下,一个复杂的动画效果需要组合多种变换效果:旋转、倾斜、缩放以及他们的转换和过渡效果。多数情况下,SVG元素和HTML元素在使用transform和transform-origin上是相同的。但它们之间也有不同之处,SVG元素不能使用box model来管理,因此,它没有margin、padding、b…
Read More
今天我们继续来学习SVG动画方面的知识。一听到动画效果,你可能就觉的头都打啦。不要担心,SVG本身提供的动画属性非常容易使用,今天我们就来学习一下基础的知识。
基础知识
SVG中提供了animate的方法来制作动画属性:
<svg>
<rect width="200" height="200" fill="slategrey">
<animate attributeName="height" from="0" to="200" dur="3s"/>
</rect>
</svg>
在上面的代码中,我们在元素里面添加了一个<animate>的标…
Read More
SVG 实例
在线实例
下面的例子是把SVG代码直接嵌入到HTML代码中。
谷歌Chrome,火狐,Internet Explorer9,和Safari都支持。
注意:下面的例子将不会在Opera运行,即使Opera支持SVG – 它也不支持SVG在HTML代码中直接使用。
SVG 实例
SVG基本形状
一个圆
矩形
不透明矩形
一个矩形不透明2
一个带圆角矩形
一个椭圆
累叠而上的三个椭圆
两个椭圆
一条线
三角形
四边形
一个星星
另一个星星
折线
另一个折线
路径
二次贝塞尔曲线
编写文字
旋转文本
路径上文字
几行文字
文本链接
定义一条线,文本或轮廓颜色(stoke)
定义一条线宽度,文本或轮廓(stroke-width)
stroke-li…
Read More
SVG 阴影
注意: Internet Explorer和Safari不支持SVG滤镜!
<defs> 和 <filter>
所有互联网的SVG滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素(如滤镜)定义。
<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜?
SVG <feOffset>
实例 1
<feOffset>元素是用于创建阴影效果。我们的想法是采取一个SVG图形(图像或元素)并移动它在xy平面上一点儿。
第一个例子偏移一个矩形(带<feOf…
Read More
SVG <text>
SVG 文本 – <text>
<text> 元素用于定义文本。
在svg中用使用<text>标签去定义一段文字。如 Example 1
在svg中写下
在平坦的路上曲折前行
<svg height="30" width="200">
<text x="0" y="15" fill="red">在平坦的路上曲折前行</text>
</svg>
在例子1中 x="0" y="15" 是文字定位坐标 可能你会有疑问,为什么文字没有距离上边是15呢?这里首先你需要了解个概念baseline 熟悉css的同学会眼熟 会用到 ve…
Read More
DEMO: http://sources.ikeepstudying.com/svg/class/class4.php
SVG <polygon>
SVG 多边形 – <polygon>
实例 1
<polygon> 标签用来创建含有不少于三个边的图形。
多边形是由直线组成,其形状是”封闭”的(所有的线条 连接起来)。
polygon来自希腊。 “Poly” 一位 “many” , “gon” 意味 “angle”.
下面是SVG代码:
<svg xmlns="htt…
Read More
DEMO: http://sources.ikeepstudying.com/svg/class/class3.php
SVG <circle>
SVG 圆形 – <circle>
<circle> 标签可用来创建一个圆:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
对于Opera用户:查看SVG文件(…
Read More
DEMO: http://sources.ikeepstudying.com/svg/class/class2.php
SVG <rect>
SVG Shapes
SVG有一些预定义的形状元素,可被开发者使用和操作:
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
下面的章节会为您讲解这些元素,首先从矩形元素开始。
SVG 矩形 – <rect>
实例 1
<rect> 标签可用来创建矩形,以及矩形的变种…
Read More
DEMO: http://sources.ikeepstudying.com/svg/class/class1.php
SVG 简介
SVG 是使用 XML 来描述二维图形和绘图程序的语言。
学习之前应具备的基础知识:
继续学习之前,你应该对以下内容有基本的了解:
HTML
XML 基础
CSS 基础
如果希望首先学习这些内容,请在本站的首页选择相应的教程。
什么是SVG?
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C…
Read More
一、应该人人皆会的基础技术
简而言之,就是让SVG的描边像是有人绘制一样的动画效果。
国外很多相关介绍的文章,来看看一些效果gif吧~
我至少看到了4篇外文对此技术介绍(参见文末参考文章),觉得挺有意思,也很好入门,可以不依赖JavaScript,故移花接木,借花献佛,以自己的理解给大家介绍下。
二、效果先行,兴趣挑起
您可以狠狠地点击这里:帅气的签名动画demo
三、你需要知道的基础知识
SVG中有个比较重要的属性分支,名为stroke, 中文软件中称之为“描边”。
stroke除了自己,还有其他诸多兄弟姐妹,来,站起来给大家瞅瞅:
stroke 表示描边颜色。这很有意思,名字不是stroke-color, 而就是…
Read More
在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性。每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发。像CSS 库,框架,应用这样的工具能够为开发者做很多事,而且可以使开发者创造出创新立异的WEB应用。
在这篇文件章中我们找到了一系列对开发者有用的CSS库,它们能帮助开发者在一定的期限内取得有创造性和创新性的成果。我们希望这个列表能有助于您的开发并为您提供方便。尽情享受吧!
1. Kite
Kite是一个灵活的布局助手CSS库。Kite使用`inline-block`而不是最新的CSS语法。它注重实际,易于理解且容易使用。Kite…
Read More
在我们的日常开发中,经常都会用到Ajax来提交表单。让我们来看一个典型的例子:
<form id="myform" action="webservice.php" method="post">
<input type="email" name="email" />
<select name="job">
<option value="">角色</option>
<option>web开发者</option>
In my daily life, I enjoy taking photos with my smartphone and uploading them to various websites. So I started thinking, “Is it possible to implement these functions in web browser?” Although Dynamsoft ImageCapture Suite allows us to capture images from webcam, it is designed for a desktop App development on windows and Mac, not