Month: July 2015

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

SVG矢量绘图 path路径详解(贝塞尔曲线, 曲线, 平滑直线及弧形)

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

SVG矢量绘图 path路径详解(基本画法)

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

Google Maps API V3: 通过邮编获取经纬度 Get Location (Latitude and Longitude) from Zip Code (Pin Code) using JavaScript

In this article I will explain with an example, how to get Location Coordinates i.e. Latitude and Longitude from Zip Code (Pin Code) by making use of Google Maps API V3 (Version 3) and JavaScript. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <textarea id="txtAddress… Read More

Google Maps V3: 导航到指定地址 Draw (Plot) route between User’s current location and Specified location

In this article I will explain how to draw a route between user’s current location and the specified location on Google Maps V3. In day to day life in our mobile phones we make use of navigation, in similar way using the HTML5 GeoLocation feature we can determine the current location of the user and using

点击谷歌地图后获取经纬度 Get Latitude and Longitude (Location Coordinates) using Google Maps OnClick event

n this short code snippet article I will explain how to get the Geographical position coordinates of a location i.e. Latitude and Longitude when user clicks anywhere on Google Maps using the Google Maps V3 OnClick event handler. In the below Google Map implementation, I have assigned an event handler to the Google Map within which