把svg标签下的所有元素所占的1000*1000大小在300*300中显示,代码如下:
var?svg?=?d3.select("body").append("svg")
????.attr("width",?300)
????.attr("height",?300)
????.attr("viewBo...
分类:
其他好文 时间:
2015-04-17 18:41:48
阅读次数:
190
今天我来讲一下关于使用SVG画图的一些基本知识,并完成一个简单的DEMO演示。关于SVG的基础知识,这里暂时不做阐述,因为网上关于svg的知识不算少,这里推荐大家去w3c school看就可以,另外慕课网也有很多svg的视频,目前我对svg的了解其实也只是皮毛,这里通过一个简单的DEMO演示讲述SVG能帮我们做些什么,以及看一下关于svg的基本用法等。
svg主要通过两种方式呈现在浏览器...
分类:
其他好文 时间:
2015-04-16 15:47:07
阅读次数:
280
SVG转canvas再转png图片这个无聊的需求是因为客户要用邮件客户端看各种图表,只好搞了搞。
对插件canvg.js做出了小的改动,把canvg()函数第二个参数由文件路径修改为直接传递svg代码,同时避免了警告
Synchronou...
分类:
其他好文 时间:
2015-04-14 13:10:35
阅读次数:
121
选择器
选择孩子元素和css属性
获得孩子元素的个数选择器jquery的选择器很强大,可以的话,能用jquery的时候,真的是非常方便。选择孩子元素和css属性先看下面的代码:SelectColor = $(ColorId).children('svg').children('rect').css('fill');这个代码很容易懂。首先:
ColorId = $(“#id”);
svg是一...
分类:
Web程序 时间:
2015-04-13 16:41:28
阅读次数:
141
这是一款效果非常酷的jQuery和CSS3 3D页面切换导航菜单特效插件。该导航菜单插件是汉堡包隐藏菜单,每个菜单项的图标使用SVG来制作,鼠标滑过图标时有动画效果,点击某一个菜单项后,页面会在3D空间进行切换,效果非常炫酷。
效果演示:http://www.htmleaf.com/Demo/201504111660.html
下载地址:http://www.htmleaf.com/j...
分类:
Web程序 时间:
2015-04-12 13:25:53
阅读次数:
151
interact.js是一款支持元素惯性拖放和多点触摸手势的js插件。该插件支持在桌面设备和移动手机设备中拖放元素,拖动结束时带有惯性效果。并且支持移动设备的多点触摸手势。它的特点有:
带惯性和吸附效果支持多元互动跨浏览器和设备,支持桌面和移动版本的Chrome, Firefox 和 Opera浏览器以及IE8+浏览器可以和SVG元素相互作用轻量级,无任何外部依赖除非要支持IE8或修改鼠标样...
分类:
Web程序 时间:
2015-04-11 14:56:48
阅读次数:
138
矢量图和位图矢量图:基于数学的描述位图:基于像素点的描述svg的使用1、浏览器直接打开svg文件2、通过IMG标签使用3、通过SVG标签使用4、作为CSS背景使用基本图形和基本属性基本图形:rect circle ellipse line polyline polygon基本属性:fill:填充色s...
分类:
其他好文 时间:
2015-04-11 13:06:18
阅读次数:
166
上一篇我们说了如何画圆饼。这一次我们说如何做折线图。网上有个库chartist.js做svg矢量数据的一个库。里面有个折现统计,我没有做的和他一样,因为我也不是很熟悉svg.权当先试试水而已,所以写的不好.望各位指教。上代码!!!!!!!!!!!(function(){ functio...
分类:
Web程序 时间:
2015-04-11 11:37:43
阅读次数:
1102
哈哈哈,好久没写博客了,最近比较忙,气死了我。今天又是周末,把前两天放前面的有些东西还没写完,下午把他写了。嘿嘿,废话少说,我们来研究研究svg.本来我以前学的是canvas.当时学canvas.感觉那家伙各种牛逼。但是我还是发现那东西比较复杂。写着繁琐。全部都需要用js控制。于是最近去看一了下sv...
分类:
Web程序 时间:
2015-04-11 11:29:06
阅读次数:
555
这是一款效果十分炫酷的HTML5 SVG制作的运动模糊动画特效。该SVG运动模糊特效有三种效果:画廊效果、模态窗口效果和侧边栏菜单效果。它们使用SVG过滤器和js及css相配合,在元素运动时产生动态模糊的炫酷效果。
运动模糊是一种技术,广泛应用于一般的运动图形和动画,使运动更加流畅自然。维基百科对运动模糊的解释是:运动模糊是明显的在静止图像或图像序列如电影或动画的快速移动的物体。它是当图像被记录...
分类:
Web程序 时间:
2015-04-10 13:38:06
阅读次数:
167