关注
分享
文章平均质量分 91
SVG 意为可缩放矢量图形(Scalable Vector Graphics)。 SVG 使用 XML 格式定义图像。 在我们的 SVG 教程中,你将学习 SVG 的相关知识。
云淡风清-北京
在战争中学习如何战斗。GitHub：https://github.com/luqin
展开
-
[交互式SVG组件]目录
Interactive SVG ComponentsButtonDraggable SVG elementIsometric projectionMulti-line text boxPan and zoom controlPan and zoom with textTooltip翻译 2013-04-10 10:07:25 · 1713 阅读 · 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 · 1658 阅读 · 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 · 1490 阅读 · 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 · 8275 阅读 · 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 · 3596 阅读 · 0 评论 -
How to do Photoshop-like effects in SVG
How to do Photoshop-like effects in SVGBy Erik DahlströmIntroductionI came across this nicePhotoshop tutorial the other day. Looking at this, and the other tutorials available there made me原创 2013-01-30 14:37:22 · 1591 阅读 · 0 评论 -
SVG动画演示贝塞尔曲线(1-4阶)绘制过程
贝塞尔曲线是我们大陆的叫法，英文名是Bézier Curve，港澳台称为貝茲曲線，新加坡马来西亚称为贝济埃曲线。先看一下效果图： 点击这里查看动画效果维基百科中的贝塞尔曲线条目中的几个GIF动画很漂亮，顺路贴上来。核心Javscript代码：var w = 250, h = 300, t = .5, delta =原创 2013-01-30 10:33:28 · 2470 阅读 · 0 评论 -
使用SVG内置API计算图形或点经过transform之后的新坐标
一个应用场景是，点击一条路径，显示该路径的控制点。因为有transform变形( 平移、缩放、倾斜、旋转等变换)，所以获取变形后的新坐标需要计算。纯数学的方法，就是用2D变换矩阵的一些公式去运算，过程稍微有点复杂。不过好在SVG已经提供了丰富的API将一些矩阵运算封装了，非常实用，下面是Demo.svg代码.知识点：getScreenCTM() matrixTransform()原创 2013-01-30 10:32:36 · 1515 阅读 · 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 · 1504 阅读 · 0 评论 -
[SVG] 根据SVG椭圆弧路径参数计算中心点坐标、起始角度、结束角度的Javascript函数
SVG spec 1.2以及之前的版本标准中，都只有一种绘制椭圆弧的方式，即以起点、终点、长半轴、短半轴、大小弧标记、顺逆时针方向标记、倾角为参数来确定一段弧。这个方法很强大并灵活，可绘制任意的椭圆弧。有时候我们需要计算圆弧的圆心和起始角度、结束角度，虽然标准官方文档给出了计算公式的描述，但是没有给出直接的代码。我根据标准文档以及网上的资料，写了一个Javascript函数来做这件事。原创 2013-01-30 10:29:29 · 2534 阅读 · 0 评论 -
SVG坐标系统与坐标转换
这一章非常基础，非常重要，同时也是相对比较难懂一点的，特别是ViewBox与视口的关系1.坐标系统与视口(ViewPort)SVG中的坐标系统也是由横坐标轴(X轴)、纵坐标轴(Y轴)和原点组成，SVG的坐标系统称为工作区坐标系统或者矩阵坐标系统。SVG的渲染都是在一个矩形区域内发生的，这个有限的矩形区域在SVG中被称为"视口",超出这个视口的图形将不被显示，所以视口也就是S原创 2013-01-30 10:10:37 · 6340 阅读 · 0 评论 -
svg中transform的矩阵变换原理
transform的原理是计算机图形学中的2D矩阵变换，在开始之前，首先来复习下一个简单的线性代数知识：矩阵与向量乘法。太复的用不到，只需要3维向量与3x3矩阵的乘积：接下来我们来说说transform跟矩阵乘法的关系，我们的任何一个html元素渲染完成后可以得到一张位图，把这张位图上所有的点都做一次矩阵运算，将得到一张的新的位图，这就是transform的基本含义。首先来看最简单原创 2013-01-30 10:03:27 · 3889 阅读 · 0 评论 -
svg标签
一、SVG中对图像标签的支持AttributeStyle:CSS fill 属性定义填充的颜色CSS stroke-width 属性指定填充线宽CSS stroke 属性指定border颜色CSS fill-opacity 属性定义填充颜色的透明度（从0到1）CSS stroke-opacity属性定义描边颜色的透明度（从0到1）CSS opacity属性定义整个元原创 2013-01-30 10:01:34 · 3129 阅读 · 0 评论 -
HTML 5中SVG 2D笔画与填充
填充色 - fill属性这个属性使用设置的颜色填充图形内部，使用很简单，直接把颜色值赋给这个属性就可以了。看例子：rect x="10" y="10" width="100" height="100" stroke="blue" fill="red" fill-opacity="0.5" stroke-opacity="0.8"/> 上面例子中画了一个红色蓝边的矩原创 2013-01-30 09:59:59 · 1530 阅读 · 0 评论 -
SVG中的动画元素
SVG中的动画元素有五个，它们都可以随着时间的变化而改变SVG元素的属性或样式值,如下所示:：改变数值的属性或样式的值；：改变非数据值的属性或样式的值，如visibility属性等；：沿着某路径移动SVG元素获得动画效果；：改变某些元素与颜色有关的属性或样式的值；：改变SVG元素进行坐标变换时候的动画效果；attributeName=""：批原创 2013-01-30 09:58:24 · 1990 阅读 · 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 · 35098 阅读 · 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 · 1632 阅读 · 1 评论 -
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 · 5507 阅读 · 1 评论 -
svg webtopo原型（1）基本功能
考虑到svg也是html5的标准之一，考虑继续抽空把svg的topo原型移植完。阻力：已经有webtopology开源包了，实现的功能基本类似 参照vml模型的顺序，先实现基本的文本和画线功能。之前在前期探索中，已经完成了画矩形、画线的探索，包括ie/opera的兼容，中文处理等。因此基本功能还算顺利。主要实现文本、线条的显示。以及基本的js操作的简单封装。兼容ie+a原创 2013-01-17 16:53:54 · 1576 阅读 · 0 评论 -
SVG中常用基本形状教程
SVG的基础形状矩形（rect）、圆（circle）、椭圆（ellipse）、线段（line）、折线（polyline）和多边形（polygon），本文介绍了SVG中这些常用基本形状的语法及教程。一、矩形矩形标记允许你创建矩形或它的变体，比如正方形，圆角矩形等。语法如下：x属性定义了矩形左上角顶点在用户坐标系X轴上的坐标，缺省值为 0；y属性定义了矩形左上角顶点在用户坐标系原创 2013-01-17 16:47:28 · 2618 阅读 · 0 评论 -
AJAX + SVG 实现实时监控图表
简介： AJAX 已经有很多文章介绍它的原理及其应用了。但是遗憾的是现在并没有很多结合实际项目应用。本文结合实际项目中的应用来讲述利用 AJAX 和SVG 技术如何创建各种激动人心的功能，并附带可以运行的例子和源代码。前言AJAX 已经有很多文章介绍它的原理及其应用了。但是遗憾的是现在并没有很多结合实际项目应用。本文结合实际项目中的应用来讲述利用 AJAX 和SVG 技术如何创建各种激动人原创 2013-01-17 16:43:33 · 8046 阅读 · 3 评论 -
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 · 3416 阅读 · 0 评论 -
怎么在网页中通过JAVAscript控制SVG图像放大缩小
首先先说明一下我想做出的网页效果，基本上和地图一样，将鼠标放在图像上之后，滚动鼠标滑轮可以实现图片放大和缩小，按下鼠标后移动鼠标可以实现图像的移动，具体效果去百度（谷歌）地图体验一下就知道了。当然，上面的只是我的初步设想，在实现过程中就出问题了，下面我把自己遇到的困难和解决方法说一下，由于这是公司项目，涉及到知识产权和保密问题，我就只说思想，不给代码，代码就自己写吧。问题一：鼠标滑轮时间的原创 2013-01-17 16:33:16 · 2792 阅读 · 0 评论 -
SVG中文乱码解决步骤与方法
好多SVG编辑器都有不能正常支持中文，后来自己手工创建SVG文件，却也不能在浏览器插件里正常显示。还以为是插件问题（如adobe svg viewer和corel svg viewer等），象我用inkscape，就能很好的处理中文，但却不能在浏览器里正常显示！不知为什么，还真以为插件问题。查看svg viewer的技术规范，都说是支持utf-8的，那是什么问题呢？难道是文字编码问题，后来几经测试原创 2013-01-17 16:30:53 · 12654 阅读 · 0 评论 -
SVG鼠标事件响应的四种写法
SVG有四种常用的鼠标响应的脚本写法(SMIL方式、Attributes方式、JavaScript+SMIL方式、EventListener方式)，根据不同的需要让大家有更多的选择。本文介绍了四种实现SVG鼠标事件的例子。SVG鼠标事件实现方式的例子效果是：单击一个红色的矩形后，它的填充颜色会变成蓝色1 SMIL方式例程1 鼠标事件之SMIL方式 在前面原创 2013-01-17 16:27:35 · 57077 阅读 · 4 评论 -
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 · 1224 阅读 · 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 · 14594 阅读 · 0 评论 -
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 · 2295 阅读 · 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 · 2571 阅读 · 1 评论 -
如何使用 SVG 进行缩放和平移
本主题演示了如何使用可缩放的向量图形 (SVG) 进行缩放和平移，并在结尾处提供了一个可进行缩放和平移的复杂组织结构图示例。假定你掌握了基本的 HTML 和 JavaScript 知识，并能访问可在 HTML5 中呈现内联 SVG 的浏览器（如 Windows Internet Explorer 9）。简介创建 SVG 测试图基于浏览器的 SVG 缩放和平移基于 JavaScript原创 2013-01-07 17:48:44 · 24503 阅读 · 0 评论 -
如何向网页添加 SVG
本主题介绍了在网页中呈现 SVG 的常见方法，并假定你已掌握有关 HTML 和 JavaScript 的基础知识。简介SVG 的呈现方法内联 HTML5内联 XHTML独立 SVG嵌入插件摘要相关主题简介如果你只了解可缩放矢量图形 (SVG)，并希望体验 SVG，则你首先需要解决的问题之一是如何向基本网页添加 SVG。 如果你看一下相对基本的网页模板，便可获知如何开原创 2013-01-07 17:48:11 · 10502 阅读 · 0 评论 -
高级 SVG 动画
此主题将介绍有关为网站创建 SVG 动画方面的更高级概念。在学习此教程之前，请掌握基本 SVG 动画、中级 SVG 动画，并充分了解 HTML 和 JavaScript。注意 要查看本主题中的示例，你需要一个支持 SVG 元素的浏览器，如 Windows Internet Explorer 9。在本主题中，我们将圆形球竞技场（在中级 SVG 动画部分进行了介绍）扩展为以教学为中心的 2原创 2013-01-07 17:47:35 · 10537 阅读 · 0 评论 -
中级 SVG 动画
此主题紧接基本 SVG 动画主题，将介绍一些中级 SVG 动画技术。若要完全理解此主题中所述的概念，请计划花 1 小时左右的时间来学习。注意 要查看本主题中包含的示例，必须使用一个支持 SVG 元素的浏览器，如 Windows Internet Explorer 9。在基本 SVG 动画中，我们主要介绍了对象的旋转。在本主题中，我们主要介绍对象的平移（即空间运动）以及这类平移的最常见结原创 2013-01-07 17:46:37 · 1323 阅读 · 0 评论 -
基本 SVG 动画
本主题将介绍基本 SVG 动画，它是学习中级 SVG 动画之前必须掌握的内容。此主题假定你基本了解 HTML 和 JavaScript。若要完全理解此主题所述的内容，请计划花 1 小时左右的时间来学习。注意 要查看本主题中包含的示例，必须使用一个支持 SVG 元素的浏览器，如 Windows Internet Explorer 9。尽管在 Internet Explorer 9 中不支原创 2013-01-07 17:45:22 · 8453 阅读 · 0 评论 -
SVG 坐标转换
此主题将介绍与 getScreenCTM() 方法关联的 SVG 坐标转换。SVG 坐标和转换这个题目非常广。你可以从 W3C SVG 规范中找到有关该题目的基本信息 – 尤其是坐标系、转换和单位。本主题将介绍与 SVG 坐标关联的尤为致命问题 – 将屏幕坐标点（从技术上讲为初始视区坐标系）映射到与任何给定 SVG 元素关联的坐标系（从技术上讲为当前用户坐标系）。例如，考虑一个使用标准笛卡原创 2013-01-07 17:44:08 · 4860 阅读 · 2 评论 -
了解SVG
教程细节· 语言: JavaScript,HTML, SVG· 难度:中等· 预计阅读时间:30分钟 SVG-可缩放矢量图形，是一个XML风格标记驱动的矢量图形的浏览器渲染引擎。除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG。Canvas也有同样的支持情况，所以问题往往表现为：我们应该使用哪种方案？原创 2013-01-06 21:12:06 · 1361 阅读 · 0 评论