Author: Gideon

相信大家都见到过这样神奇的技术：一副线条构成的画能自动画出自己。非常的酷。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

1. php 类 I found this class looking for something else actually but I remembered I needed some while ago something similar and I never found one. I’m sure it will help a lot of developers who try to detect click frauds or something else. The class will scan the headers of the visitor which (in

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

path元素的形状是通过属性d定义的，属性d的值是一个“命令+参数”的序列，我们将讲解这些可用的命令，并且展示一些示例。 每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你需要移动到的那个点的x和y轴坐标。比如移动到 (10,10)这个点的命令，应该写成“M 10 10”。这一段字符结束后，解析器就会去读下一段命令。每一个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位。另一种是用小写字母，表示采用相对定位（例如：从上一个点开始，向上移动10px，向左移动7px）。 因为属性d采用的是用户… Read More

SVG的形状标签里，path是最强大的一个，掌握了path就足够处理常见的绘图问题了。 先看一下path标签的基本用法: <path d=”M100,100 L200,200 L200,400″ fill=”#333″ stroke=”#000″ /> path标签通过属性d来定义路径，定义信息由一段字符串构成，另外path也可以通过fill和stroke属性来定义填充和边框。 d属性的信息其实并不复杂，由字母和数字构成，数字表示坐标点，字母负责表示如何连接这些坐标点。比如上面的示例中，M表示起点，L表示直线连接，所以d的信息可以… Read More