Category: Div / Css / XML / HTML5 / SVG

SVG技术入门:线条动画实现原理

相信大家都见到过这样神奇的技术:一副线条构成的画能自动画出自己。非常的酷。Jake Archibald是这种SVG技术的首创者,并且写了一篇非常好的文章来描述它是如何实现的。Brian Suda也在24 Ways网站上讨论过它。 Polygon使用它在一篇设计方面的文章里创造出了非常神奇的效果。Codrops也做出了一些非常漂亮的例子。 其实我没有什么好增补的,只是想把这种技术说的更明白些,所以,在这里我要用我的方式把这种技术再讲解一遍。 1. 你有一个SVG图形 2. 这个图形必须要有一个线条(stroke)属性 3. 线条可以是虚线 我们可以用Illustrator制作,也可以用编程实现。我们用CSS来设置这些路… Read More

如何使用CSS来修改SVG原点和制作SVG动画

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本身提供的动画属性非常容易使用,今天我们就来学习一下基础的知识。 基础知识 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 实例,SVG 参考手册

SVG 实例 在线实例 下面的例子是把SVG代码直接嵌入到HTML代码中。 谷歌Chrome,火狐,Internet Explorer9,和Safari都支持。 注意:下面的例子将不会在Opera运行,即使Opera支持SVG – 它也不支持SVG在HTML代码中直接使用。 SVG 实例 SVG基本形状 一个圆 矩形 不透明矩形 一个矩形不透明2 一个带圆角矩形 一个椭圆 累叠而上的三个椭圆 两个椭圆 一条线 三角形 四边形 一个星星 另一个星星 折线 另一个折线 路径 二次贝塞尔曲线 编写文字 旋转文本 路径上文字 几行文字 文本链接 定义一条线,文本或轮廓颜色(stoke) 定义一条线宽度,文本或轮廓(stroke-width) stroke-li… Read More

SVG 教程 (六)SVG 阴影,SVG 渐变 – 线性,SVG 渐变- 放射性

SVG 阴影 注意: Internet Explorer和Safari不支持SVG滤镜! <defs> 和 <filter> 所有互联网的SVG滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素(如滤镜)定义。 <filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜? SVG <feOffset> 实例 1 <feOffset>元素是用于创建阴影效果。我们的想法是采取一个SVG图形(图像或元素)并移动它在xy平面上一点儿。 第一个例子偏移一个矩形(带<feOf… Read More

SVG 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果

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

SVG 教程 (四)多边形,曲线,路径

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

SVG 教程 (三)圆形,椭圆,直线

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

SVG 教程 (二)矩形

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

SVG 教程 (一)

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

纯CSS实现帅气的SVG路径描边动画效果

一、应该人人皆会的基础技术 简而言之,就是让SVG的描边像是有人绘制一样的动画效果。 国外很多相关介绍的文章,来看看一些效果gif吧~ 我至少看到了4篇外文对此技术介绍(参见文末参考文章),觉得挺有意思,也很好入门,可以不依赖JavaScript,故移花接木,借花献佛,以自己的理解给大家介绍下。 二、效果先行,兴趣挑起 您可以狠狠地点击这里:帅气的签名动画demo 三、你需要知道的基础知识 SVG中有个比较重要的属性分支,名为stroke, 中文软件中称之为“描边”。 stroke除了自己,还有其他诸多兄弟姐妹,来,站起来给大家瞅瞅: stroke 表示描边颜色。这很有意思,名字不是stroke-color, 而就是… Read More

Web 开发中 20 个很有用的 CSS 库

在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性。每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发。像CSS 库,框架,应用这样的工具能够为开发者做很多事,而且可以使开发者创造出创新立异的WEB应用。   在这篇文件章中我们找到了一系列对开发者有用的CSS库,它们能帮助开发者在一定的期限内取得有创造性和创新性的成果。我们希望这个列表能有助于您的开发并为您提供方便。尽情享受吧!   1. Kite Kite是一个灵活的布局助手CSS库。Kite使用`inline-block`而不是最新的CSS语法。它注重实际,易于理解且容易使用。Kite… Read More

Take a Photo and Upload it on Mobile Phones with HTML5

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