raphael js-Raphael.js用path方法绘制图。是怎么做到的?

问题描述

Raphael.js用path方法绘制图。是怎么做到的?

比如path方法中的数据是怎么得到的:
http://raphaeljs.com/icons/#customer

解决方案

查看源代码
比如:

 <path fill="url(#48490-_0050af-_002c62)" stroke="none" d="M22.646,19.307C23.606,17.724,24.169,15.871999999999998,24.17,13.886C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885C3.204,19.674,7.897,24.366,13.688,24.366C15.675,24.366,17.527,23.803,19.11,22.843L26.238,29.97L29.773,26.433L22.646,19.307ZM13.688,20.369C10.106000000000002,20.361,7.210000000000001,17.465,7.204000000000001,13.885C7.210000000000001,10.303,10.107000000000001,7.407,13.688,7.399C17.267,7.407,20.166,10.303,20.172,13.885C20.165,17.465,17.267,20.361,13.688,20.369ZM15.687,9.051H11.687V11.884H8.854V15.885000000000002H11.687V18.718000000000004H15.687V15.884000000000004H18.519V11.885000000000003H15.685999999999998V9.051Z" transform="matrix(1,0,0,1,4,4)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;" opacity="1" fill-opacity="1"></path>

解决方案二:

软件可以导出SVG格式的,里面自动转换成路径,比如你用PhotoShop做好,然后选择导出或存成SVG格式,就可以得到路径了。
另外像Vector Magic这样的软件,可以将图片自动转换成矢量图,存成SVG格式的时候,也可以得到路径。

时间: 2024-10-27 10:05:57

raphael js-Raphael.js用path方法绘制图。是怎么做到的?的相关文章

利用js(jquery)操作Cookie的方法说明

 本篇文章主要是对利用js(jquery)操作Cookie的方法进行了详细的说明介绍,需要的朋友可以过来参考下,希望对大家有所帮助 Cookie操作是我们在Web开发中经常会用到的功能,以往我们一般是通过javascript实现的.下面这款jquery插件是专门用来进行cookie操作   的,包括cookie的添加.清除.读取-- 你可以在这款插件的主页下载到它:http://jquery.com/ 当在页面中引用了jquery文件及该插件文件后,可进行如下操作:   设置cookie 设置一

Node.js 和 npm 卸载安装方法详解

为了学 Vue.js,用 npm 装了 Vue,经过我的折腾,npm 被我玩坏了,干脆连 Node.js 也重新装一个,下面记录一下在本地 Windwos 环境用 vagrant 搭建的虚拟机(Homestaead)和生产环境阿里云 CentOS 系统安装 Node.js 的步骤,以及 npm 安装依赖的不同之处. 使用源码编译的方式安装 node.js.首先将机子上的 Node.js 卸载,我直接贴上 Stack Overflow 上提供的步骤: 1.卸载 npm 和 Node.js 先卸载

php使用gzip压缩传输js和css文件的方法_php技巧

本文实例讲述了php使用gzip压缩传输js和css文件的方法.分享给大家供大家参考.具体如下: <?php /** * 完整调用示例: * 1.combine.php?t=j&b=public&fs=jslib.jquery,function * * 该例子调用的是网站根目录下的public/jslib/jquery.js和public/function.js * * 2.combine.php?t=j&fs=jslib.jquery,function * * 该例子调用的

XHTML下JS浮动代码失效问题解决方法

XHTML下JS浮动代码失效问题解决方法 漂浮广告/对联代码 为什么在XHTML语言的网页中不能使用? 对联代码,查阅它在xhtml下的表达方式,结果很简单了.这是因为,按照标准来说,我们看到的窗体的滚动条不应该是 body 的,而是 HTML 的(也就是 document.documentElement 对象)所以,解决办法是:把html下不标准的代码"document.body.scrollTop"变换为"document.documentElement.scrollTo

项目中通过js动态创建层的方法为表单添加错误提示

本文介绍利用动态创建层技术实现无冗余代码为表单自动添加错误提示的方法. 项目中表单输入检测是基本必定会碰到的,本文提供一种方法通过js动态创建层的方法为表单添加错误提示.该代码在IE6和firefox3.5中测试通过. 动态创建层的代码: function createDiv(msg) { //create a new empty p var str = document.createElement("p"); str.id = "newp"; //p ID str

js实现跨域的方法实例详解

  本文实例讲述了js实现跨域的方法.分享给大家供大家参考.具体分析如下: 由于同源策略的限制,XMLHttpRequest只允许请求当前源(包含域名.协议.端口)的资源. json与jsonp的区别: JSON是一种数据交换格式,而JSONP是一种依靠开发人员创造出的一种非官方跨域数据交互协议. script标签经常被用来加载不同域下的资源,可以绕过同源策略.(有src属性的都可以获取异域文件). 如果请求的这个远程数据本身就是一段可执行的js,那么这些js会被执行(相当于eval). 方法一

充分发挥Node.js程序性能的一些方法介绍

  这篇文章主要介绍了充分发挥Node.js程序性能的一些方法介绍,Node.js是把JavaScript用于服务器端的框架,需要的朋友可以参考下 一个Node.JS 的进程只会运行在单个的物理核心上,就是因为这一点,在开发可扩展的服务器的时候就需要格外的注意. 因为有一系列稳定的API,加上原生扩展的开发来管理进程,所以有很多不同的方法来设计一个可以并行的Node.JS运用.在这篇博文里,我们就来比较下这些可能的架构. 这篇文章同时也介绍compute-cluster 模块:一个小型的Node

中文路径导致unitpngfix.js不正常的解决方法

本篇文章是对中文路径导致unitpngfix.js不正常的解决方法进行了详细的分析介绍,需要的朋友参考下   双击html页面在ie6里打开正常.但是发布到网站后,网站路径里有中文路径导致png图片不显示.解决方法:修改网站路径中的中文,改为英文.

IE.JS解决IE兼容性问题方法汇总

官网 http://dean.edwards.name/weblog/2008/01/ie7-2/ 一 参考资料 1 解决IE5.IE6.IE7与W3C标准的冲突,使用(IE7.js IE8.js)兼容 http://apps.hi.baidu.com/share/detail/15407414 2 IE7.JS解决IE兼容性问题方法 http://www.chonggou.net/show/2824.html 3 消除IE浏览器系列的相关BUG(IE7-JS) http://www.fly13