SVG
文章平均质量分 91
云淡风清-北京
在战争中学习如何战斗。GitHub:https://github.com/luqin
展开
-
svg translate 操作
function dragElement(evt) { var target = evt.target; var id = target.id; var dx = evt.dx, dy = evt.dy; var scale = svgcanvas.scale();原创 2013-08-13 16:50:12 · 4002 阅读 · 0 评论 -
[交互式SVG组件]Multi-line text box
One feature that I know a lot of people, myself included, would like in SVG is a multi-line text box, so I've made one. You can see the result below and download the file at the bottom of the page. In翻译 2013-04-10 09:53:30 · 1666 阅读 · 0 评论 -
[交互式SVG组件]Isometric projection
http://www.petercollingridge.co.uk/interactive-svg-components/isometric-projection Isometeric projections are commonly used in technical drawings and used to be used in some computer game graphics翻译 2013-04-10 09:47:24 · 1498 阅读 · 0 评论 -
[交互式SVG组件]SVG元素拖拽
A common form of computer interaction is the ability to move an element on the screen by clicking on it and dragging it. This can achieved relatively easily in an SVG as below. I used this techique a翻译 2013-04-10 09:37:09 · 8298 阅读 · 1 评论 -
[交互式SVG组件]Button
One of the most basic elements for an interactive image is a button. Arguably any element associated with anonmouseup() event can be considered a button (note that buttons tend to be activate when the翻译 2013-04-10 09:30:06 · 3613 阅读 · 0 评论 -
svg webtopo原型(1)基本功能
考虑到svg也是html5的标准之一,考虑继续抽空把svg的topo原型移植完。阻力:已经有webtopology开源包了,实现的功能基本类似 参照vml模型的顺序,先实现基本的文本和画线功能。之前在前期探索中,已经完成了画矩形、画线的探索,包括ie/opera的兼容,中文处理等。因此基本功能还算顺利。主要实现文本、线条的显示。以及基本的js操作的简单封装。兼容ie+a原创 2013-01-17 16:53:54 · 1599 阅读 · 0 评论 -
SVG中常用基本形状教程
SVG的基础形状矩形(rect)、圆(circle)、椭圆(ellipse)、线段(line)、折线(polyline)和多边形(polygon),本文介绍了SVG中这些常用基本形状的语法及教程。一、矩形矩形标记允许你创建矩形或它的变体,比如正方形,圆角矩形等。语法如下:x属性定义了矩形左上角顶点在用户坐标系X轴上的坐标,缺省值为 0;y属性定义了矩形左上角顶点在用户坐标系原创 2013-01-17 16:47:28 · 2646 阅读 · 0 评论 -
AJAX + SVG 实现实时监控图表
简介: AJAX 已经有很多文章介绍它的原理及其应用了。但是遗憾的是现在并没有很多结合实际项目应用。本文结合实际项目中的应用来讲述利用 AJAX 和SVG 技术如何创建各种激动人心的功能,并附带可以运行的例子和源代码。前言AJAX 已经有很多文章介绍它的原理及其应用了。但是遗憾的是现在并没有很多结合实际项目应用。本文结合实际项目中的应用来讲述利用 AJAX 和SVG 技术如何创建各种激动人原创 2013-01-17 16:43:33 · 8062 阅读 · 3 评论 -
svg 实例效果图 (内含多个经典特效及功能)
动态普通效果http://www.adobe.com/svg/dynamic/transformations2.html无JS干预效果http://www.adobe.com/svg/dynamic/declarative.htmlJS干预效果http://www.adobe.com/svg/dynamic/javascript.html鼠标事件效果,注意可以在HT原创 2013-01-17 17:14:16 · 5520 阅读 · 1 评论 -
GML、SVG、VML三者的关系与区别比较
GML是表示实体空间信息和属性的标准,但它不支持直接显示图形。VML和SVG是在表示图形信息并加入图形显示信息,而SVG综合VML优点推出,是国际标准,比VML更具优点及前景。1 GML (Geography Markup Language) 是基于XML的空间信息编码标准,由OpenGIS Consortium (OGC)提出,得到了许多公司的大力支持,如Oracle、Galdos、M原创 2013-01-17 16:35:44 · 3457 阅读 · 0 评论 -
怎么在网页中通过JAVAscript控制SVG图像放大缩小
首先先说明一下我想做出的网页效果,基本上和地图一样,将鼠标放在图像上之后,滚动鼠标滑轮可以实现图片放大和缩小,按下鼠标后移动鼠标可以实现图像的移动,具体效果去百度(谷歌)地图体验一下就知道了。当然,上面的只是我的初步设想,在实现过程中就出问题了,下面我把自己遇到的困难和解决方法说一下,由于这是公司项目,涉及到知识产权和保密问题,我就只说思想,不给代码,代码就自己写吧。问题一:鼠标滑轮时间的原创 2013-01-17 16:33:16 · 2819 阅读 · 0 评论 -
[交互式SVG组件]目录
Interactive SVG ComponentsButtonDraggable SVG elementIsometric projectionMulti-line text boxPan and zoom controlPan and zoom with textTooltip翻译 2013-04-10 10:07:25 · 1736 阅读 · 0 评论 -
[HTML5-SVG]使用raphaeljs:代替css3实现qq空间关闭按钮旋转特效
之前写过一篇文章:css3实现qq空间相册关闭按钮转圈动画,用css3实现非常简单,但是兼容性不好,只有chrome,safari5,opera11,firefox4以上才能支持,目前firefox正式版是3.6,还不支持这个效果。今天研究了一下svg,svg主要是用来绘制矢量图形,找到一个很好的解决方案,可以解决所有浏览器的兼容。点击观看演示 首先需要载入javascript库然后编原创 2013-04-17 16:10:15 · 3573 阅读 · 0 评论 -
[HTML5-SVG]SVG是什么?SVG有什么用途?
一、SVG技术背景 随着网络上信息数据的大量涌现,如何正确显示和出版是有效传输、接收和利用它们的基础。图形、图像是信息数据可视化的主要方式。但现有的图形、图像格式存在着缺陷:非开放式,显示和印刷质量及适应性差,难以创建Web上图文信息的个性化定制、交互式以及实时动态方面的应用等。SVG正是在这样的背景下诞生的。SVG(Scalable Vector Graphics,可伸缩性矢量原创 2013-04-17 16:29:53 · 8693 阅读 · 0 评论 -
[HTML5-SVG]基于SVG技术进行WebGIS开发浅析
SVG(ScalableVectorGraphics)是W3C组织为适应InternetWeb应用的飞速发展需要而制定的一套基于XML语言的二维可缩放矢量图形语言描述规范。传统的HTML静态页面描述语言的采用的标记固定、有限且… SVG(Scalable Vector Graphics)是W3C组织为适应InternetWeb应用的飞速发展需要而制定的一套基于XML语言的二维可缩放矢量图形原创 2013-04-17 16:26:21 · 2286 阅读 · 0 评论 -
[HTML5-SVG]使用raphaeljs:绘制哆啦A梦并实现动画效果
网上有人用css3实现哆啦A梦,我给他多加了个竹蜻蜓的动画,点击观看演示,兼容性并不好,只有webkit支持动画,ie下就是一堆方块。所以我想用svg技术来实现所有浏览器的兼容。先来看下演示,目前知道的是ie6,7不支持动画,但是绘图还是没有问题的,ie6,7点击观看演示 最近对svg有些研究,先是使用svg代替css3实现qq空间关闭按钮旋转特效,然后是使用svg代替css3绘制oper原创 2013-04-17 16:15:43 · 4831 阅读 · 0 评论 -
[HTML5-SVG]JavaScript 的新领域 - 动态图片处理(SVG)
背景当 JavaScript 被 Netscape 公司发明出来时,它被用来做一些琐细的事情,比如校验表单、计算日期、提示用户;随着 Web 的迅速发展,这种轻巧而灵活的语言被委以越来越多的任务,动态地修改页面内容,一致地处理事件,甚至无刷新地和服务器交互。然而,与传统的客户端编程相比,JavaScript 操作的对象限制在 DOM 模型之内,无法进行图形编程。所以长久以来,我们在设计网页原创 2013-04-17 15:56:07 · 7466 阅读 · 2 评论 -
[HTML5-SVG]Html5的可缩放矢量图形实例SVG
可缩放矢量图形(Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。SVG格式具有以下优点:1) 图像文件可读,易于修改和编辑2) 与现有技术可以互动融合。例如:SVG技原创 2013-04-17 16:28:32 · 6884 阅读 · 0 评论 -
[HTML5-SVG]使用svg、CSS3、raphaeljs:模拟月球绕地球,地球绕太阳旋转
今天在opera中国看了一篇关于svg的动画实现,其中有一个示例是模拟月球绕地球,地球绕太阳旋转,点击观看演示。兼容性还不错,最新的主流浏览器都支持。想起了之前我有用css3实现类似的效果,点击观看演示。但是只有webkit内核的浏览器支持,因为用到了css3的animate。 要实现ie6,7,8的兼容就得用vml模拟,这时借助raphaeljs是个很好的选择。虽然效果实现了,但是只能旋转一原创 2013-04-17 16:21:24 · 4954 阅读 · 1 评论 -
[HTML5-SVG,VML,CANVAS]Web开发中的矢量绘图(vml,svg)处理和应用
前言1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 HTML 发展十分迅速并具有诸多优点,但其始终不能提供一个良好的矢量绘图解决方案。很多应用为获得绚丽的动画和绘图效果,不得已在页面中嵌入大量的 Flash。这不仅降低了页面元原创 2013-04-17 16:02:10 · 6791 阅读 · 2 评论 -
[HTML5-SVG]利用 SVG 在 Web 应用程序中创建客户端图表交互
本文给出一个具体的 Web 页面,Web 开发人员及其管理者都将会对它感兴趣。尽管代码编写理解起来足够简单,但是它建模了一个超出传统的基于表单的 Web 应用程序的 GUI 效果。此效果:只依赖于公共标准。执行起来至少跟专有备选方案一样好。开启了全新的团队合作和协作模型。给出一种以前肯定没有明确地做过文档化的实现技术。本文有以下三个目标:从用户角度演示一个特定的标准兼容的基于原创 2013-04-17 15:59:42 · 2571 阅读 · 0 评论 -
[HTML5-SVG]使用svg代替css3实现渐变
ie9不支持渐变,但是支持border-radius和box-shadow,所以在之前的小博客我都是用纯色代替渐变但是有没有办法让ie9也支持渐变,也许大多数人会想到滤镜,但是滤镜会消耗性能,而且圆角会没有效果,所以不推荐使用。有没有比css3更合适的方案呢?先看看各浏览器对css3的支持情况浏览器Radial CSSLinear CSSFirefo原创 2013-04-17 16:23:28 · 3716 阅读 · 0 评论 -
[HTML5-SVG]使用raphaeljs:代替css3绘制opera图标效果
之前的文章:css3绘制opera图形+倒影,用css3实现兼容性并不好,opera,ie均不支持渐变。上次使用svg代替css3实现qq空间关闭按钮旋转特效,发现svg用来绘图是个不错的选择,结合raphael库实现浏览器的兼容,不支持svg的浏览器会换成vml绘制。这次用这个方案来绘制opera的图形同样实现了所有浏览器的兼容。点击观看演示 实现方法如下,首先导入raphael库原创 2013-04-17 16:13:25 · 1845 阅读 · 0 评论 -
SVG中文乱码解决步骤与方法
好多SVG编辑器都有不能正常支持中文,后来自己手工创建SVG文件,却也不能在浏览器插件里正常显示。还以为是插件问题(如adobe svg viewer和corel svg viewer等),象我用inkscape,就能很好的处理中文,但却不能在浏览器里正常显示!不知为什么,还真以为插件问题。查看svg viewer的技术规范,都说是支持utf-8的,那是什么问题呢?难道是文字编码问题,后来几经测试原创 2013-01-17 16:30:53 · 12818 阅读 · 0 评论 -
SVG鼠标事件响应的四种写法
SVG有四种常用的鼠标响应的脚本写法(SMIL方式、Attributes方式、JavaScript+SMIL方式、EventListener方式),根据不同的需要让大家有更多的选择。本文介绍了四种实现SVG鼠标事件的例子。SVG鼠标事件实现方式的例子效果是:单击一个红色的矩形后,它的填充颜色会变成蓝色1 SMIL方式例程1 鼠标事件之SMIL方式 在前面原创 2013-01-17 16:27:35 · 57569 阅读 · 4 评论 -
使用SVG实现gradient背景渐变
使用SVG实现gradient背景渐变by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1957现在现代浏览器都对CSS3的渐变支持良好,加上IE的渐变滤镜,可以在不使用图片的情况下实现各个浏览器的两色渐变效果。这里,再简单介绍下如何使用svg实现元素背原创 2013-01-29 09:01:07 · 1645 阅读 · 1 评论 -
SVG脚本编程的一些技巧
1、在IE中如何调试SVG中的脚本a、去掉IE设置中的“禁止脚本调试”b、打开注册表,找到“[HKEY_CURRENT_USER\Software\Microsoft\Windows Script\Settings]”,设置"JITDebug"=dword:00000001c、然后就可以用vs.net来进行调试了2、解决IE中需要点击才能激活svg插件的问题编写一个脚本文件原创 2013-01-11 11:31:27 · 2304 阅读 · 0 评论 -
SVG DOM常用属性和方法介绍(1)
12.2 SVG DOM常用属性和方法介绍将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的。SVG支持DOM2标准。12.2.1 文档初始化相关— evt属性evt表示事件本身,可以通过evt获取与当前事件相关的信息,用户可以在script中定义响应函数,进行相应的处原创 2013-01-11 16:30:40 · 14608 阅读 · 0 评论 -
了解SVG
教程细节· 语言: JavaScript,HTML, SVG· 难度:中等· 预计阅读时间:30分钟 SVG-可缩放矢量图形,是一个XML风格标记驱动的矢量图形的浏览器渲染引擎。除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG。Canvas也有同样的支持情况,所以问题往往表现为:我们应该使用哪种方案?原创 2013-01-06 21:12:06 · 1415 阅读 · 0 评论 -
如何向网页添加 SVG
本主题介绍了在网页中呈现 SVG 的常见方法,并假定你已掌握有关 HTML 和 JavaScript 的基础知识。简介SVG 的呈现方法内联 HTML5内联 XHTML独立 SVG嵌入插件摘要相关主题简介如果你只了解可缩放矢量图形 (SVG),并希望体验 SVG,则你首先需要解决的问题之一是如何向基本网页添加 SVG。 如果你看一下相对基本的网页模板,便可获知如何开原创 2013-01-07 17:48:11 · 10541 阅读 · 0 评论 -
如何使用 SVG 进行缩放和平移
本主题演示了如何使用可缩放的向量图形 (SVG) 进行缩放和平移,并在结尾处提供了一个可进行缩放和平移的复杂组织结构图示例。假定你掌握了基本的 HTML 和 JavaScript 知识,并能访问可在 HTML5 中呈现内联 SVG 的浏览器(如 Windows Internet Explorer 9)。简介创建 SVG 测试图基于浏览器的 SVG 缩放和平移基于 JavaScript原创 2013-01-07 17:48:44 · 24567 阅读 · 0 评论 -
SVG常见问题汇总
1. SVG背景透明的解决办法 IE中,完全可以支持SVG透明。 条件:使用标签 (自己测试的,其他标签未知) Tip: Internet Explorer supports an additional attribute, wmode="transparent", that let the HTML page background shine through. tip:i原创 2013-01-10 16:47:24 · 2605 阅读 · 1 评论 -
中级 SVG 动画
此主题紧接基本 SVG 动画主题,将介绍一些中级 SVG 动画技术。若要完全理解此主题中所述的概念,请计划花 1 小时左右的时间来学习。注意 要查看本主题中包含的示例,必须使用一个支持 SVG 元素的浏览器,如 Windows Internet Explorer 9。在基本 SVG 动画中,我们主要介绍了对象的旋转。在本主题中,我们主要介绍对象的平移(即空间运动)以及这类平移的最常见结原创 2013-01-07 17:46:37 · 1338 阅读 · 0 评论 -
高级 SVG 动画
此主题将介绍有关为网站创建 SVG 动画方面的更高级概念。在学习此教程之前,请掌握基本 SVG 动画、中级 SVG 动画,并充分了解 HTML 和 JavaScript。注意 要查看本主题中的示例,你需要一个支持 SVG 元素的浏览器,如 Windows Internet Explorer 9。在本主题中,我们将圆形球竞技场(在中级 SVG 动画部分进行了介绍)扩展为以教学为中心的 2原创 2013-01-07 17:47:35 · 10569 阅读 · 0 评论 -
基本 SVG 动画
本主题将介绍基本 SVG 动画,它是学习中级 SVG 动画之前必须掌握的内容。此主题假定你基本了解 HTML 和 JavaScript。若要完全理解此主题所述的内容,请计划花 1 小时左右的时间来学习。注意 要查看本主题中包含的示例,必须使用一个支持 SVG 元素的浏览器,如 Windows Internet Explorer 9。尽管在 Internet Explorer 9 中不支原创 2013-01-07 17:45:22 · 8472 阅读 · 0 评论 -
svg平移、放大、缩小及js操作svg
在svg图形中,很重要的概念就是坐标系。首先分析一下width、height、viewBox这三个属性。width:宽度,这个宽度是指在页面中实际使用的大小,跟div中定义width是同样的含义。height:高度,含义同上。viewBox:视图框,是一个由字符串表示的,格式:"0 0 2050 1000",--->(ULCx ULCy UUwidth UUheight)ULC原创 2013-01-30 09:48:32 · 35198 阅读 · 4 评论 -
SVG中的动画元素
SVG中的动画元素有五个,它们都可以随着时间的变化而改变SVG元素的属性或样式值,如下所示::改变数值的属性或样式的值;:改变非数据值的属性或样式的值,如visibility属性等;:沿着某路径移动SVG元素获得动画效果;:改变某些元素与颜色有关的属性或样式的值;:改变SVG元素进行坐标变换时候的动画效果;attributeName="":批原创 2013-01-30 09:58:24 · 2021 阅读 · 0 评论 -
svg_example
http://srufaculty.sru.edu/david.dailey/svg/http://www.xul.fr/en-xml-svg.htmlhttp://zvon.org/xxl/svgReference/Output/http://www.w3schools.com/svg/svg_text.asphttp://image.online-convert原创 2013-01-16 17:58:42 · 1229 阅读 · 0 评论 -
SVG动画演示贝塞尔曲线(1-4阶)绘制过程
贝塞尔曲线是我们大陆的叫法,英文名是Bézier Curve,港澳台称为貝茲曲線,新加坡马来西亚称为贝济埃曲线。先看一下效果图: 点击这里查看动画效果维基百科中的贝塞尔曲线条目中的几个GIF动画很漂亮,顺路贴上来。核心Javscript代码:var w = 250, h = 300, t = .5, delta =原创 2013-01-30 10:33:28 · 2491 阅读 · 0 评论 -
理解SVG的图形填充规则
本文内容翻译自W3.org网站的SVG规范,作为自己的备忘,供SVG初学者参考。原文网址: SVG fill-rule property in SVG 1.1 (Second Edition)SVG的图形填充规则通过fill-rule属性来指定。‘fill-rule’有效值:nonzero | evenodd | inherit默认值翻译 2013-01-30 10:31:11 · 1511 阅读 · 0 评论