Day: July 8, 2015

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