`
jishublog
  • 浏览: 866111 次
文章分类
社区版块
存档分类
最新评论

基于SVG的web页面图形绘制API介绍

 
阅读更多

一：什么是SVG

SVG是1999由W3C发布的2D图形描述语言，纯基于XML格式的标记语言，SVG的

全称是可扩展的矢量图形跟传统的Raster方式的图形(JPG, PNG, GIF等)有很大的差

别。SVG是2D图形开发平台，包括两个部分，一个是基于XML语言的数据描述，另

外一部分是可编程的API，其关键特性支持图形，文本，梯度填充，画笔风格，图形

特效滤镜如高斯模糊，会在稍后的代码中演示。同时还支持各种鼠标事件与DOM部

分API。几乎所有的主流浏览器都支持SVG图形格式的现实与绘制，IE9+以上也开始

支持SVG，在低版本的IE中需要插件支持。

更多了解SVG访问这里：http://www.w3.org/Graphics/SVG/About.html

二：JavaScript中SVG API编程演示

创建与获取SVG对象

// create svg object

var mySvg = document.createElementNS("http://www.w3.org/2000/svg","svg");

mySvg.setAttribute("version","1.2");// IE9+ support SVG 1.1 version

mySvg.setAttribute("baseProfile","tiny");

container.appendChild(mySvg);

在SVG中创建一个矩形图形：

var c1 = document.createElementNS("http://www.w3.org/2000/svg","rect");

c1.setAttribute("x","20");

c1.setAttribute("y","20");

c1.setAttribute("width","150");

c1.setAttribute("height","150");

c1.setAttribute("fill","rgb(0,0,255)");

c1.setAttribute("stroke","rgb(0,0,0)");

c1.setAttribute("stroke-width","4");

mySvg.appendChild(c1);

在SVG中实现文本绘制：

// SVG draw text

var stext = document.createElementNS("http://www.w3.org/2000/svg","text");

stext.setAttribute("x","700");

stext.setAttribute("y","100");

stext.setAttribute("font-size","18px");

stext.setAttribute("fill","#FF0000");

var textString = document.createTextNode("Hello SVG");

stext.appendChild(textString);

mySvg.appendChild(stext);

在SVG对象上实现鼠标点击事件处理与MouseUp事件处理：

// mouse event handling

c1.addEventListener("click",changeColor,false);

c2.addEventListener("mouseup", changeColor,false);

通过SVG 图形滤镜实现高斯模糊：

        <div id="blur-image-demo">
        	<div id="left" style="width:20%;"><img src="woniu.png" alt="Original image" width="325" height="471"></div>
        	<div id="right" style="width:80%;">
		        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
				  <defs>
				    <filter id="f1" x="0" y="0">
				      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
				    </filter>
				  </defs>
				  <image x="0" y="0" width="325" height="471" xlink:href="woniu.png" filter="url(#f1)"/>
				</svg>
			</div> 
		</div>
运行效果：


源代码，可以copy直接运行

JavaScript部分

            window.onload = function() {
            	// get DIV
            	var container = document.getElementById("svgContainer");

            	// create svg object
            	var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            	mySvg.setAttribute("version", "1.2");// IE9+ support SVG 1.1 version
            	mySvg.setAttribute("baseProfile", "tiny");
            	container.appendChild(mySvg);
            	
            	// create svg shape - rectangle
				var c1 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            	c1.setAttribute("x", "20");
            	c1.setAttribute("y", "20");
            	c1.setAttribute("width", "150");
            	c1.setAttribute("height", "150");
            	c1.setAttribute("fill", "rgb(0,0,255)");
            	c1.setAttribute("stroke", "rgb(0,0,0)");
            	c1.setAttribute("stroke-width", "4");
            	mySvg.appendChild(c1);
            	
            	// create svg shape - circle
            	var c2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
            	c2.setAttribute("cx", "250");
            	c2.setAttribute("cy", "100");
            	c2.setAttribute("r", "60");
            	c2.setAttribute("fill", "#996699");
            	c2.setAttribute("stroke", "#AA99FF");
            	c2.setAttribute("stroke-width", "7");
            	mySvg.appendChild(c2);
            	
            	// create svg shape - ellipse
            	var c3 = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
            	c3.setAttribute("cx", "450");
            	c3.setAttribute("cy", "100");
            	c3.setAttribute("rx", "100");
            	c3.setAttribute("ry", "50");
            	c3.setAttribute("fill", "#FF0000");
            	c3.setAttribute("stroke", "purple");
            	c3.setAttribute("stroke-width", "3");
            	mySvg.appendChild(c3);
            	
            	// create svg shape - draw lines
            	for(var i=0; i<10; i++)
				{
            		var sline = document.createElementNS("http://www.w3.org/2000/svg", "line");
            		var x1 = 580 + i*10;
            		console.log(x1);
            		
            		sline.setAttribute("x1", x1.toString());
            		sline.setAttribute("y1", "10");
            		sline.setAttribute("x2", x1.toString());
            		sline.setAttribute("y2", "180");
            		sline.setAttribute("stroke", "rgb(0,255,0)");
            		sline.setAttribute("stroke-width", "2");
                	mySvg.appendChild(sline);
				}
            	
	        	// SVG draw text
	        	var stext = document.createElementNS("http://www.w3.org/2000/svg", "text");
	        	stext.setAttribute("x", "700");
	        	stext.setAttribute("y", "100");
	        	stext.setAttribute("font-size", "18px");
	        	stext.setAttribute("fill", "#FF0000");
	        	var textString = document.createTextNode("Hello SVG");
	        	stext.appendChild(textString);
	        	mySvg.appendChild(stext);
            	
            	// mouse event handling
            	c1.addEventListener("click", changeColor, false);
            	c2.addEventListener("mouseup", changeColor, false);
            };
            
            function changeColor(evt) {
                var target = evt.target;
                target.setAttributeNS(null, "fill", "green");
            }
HTML部分： 

<html>
    <head>
        <title>Gloomyfish SVG Demo</title>
        
        <style>
            #svgContainer {
                width:800px;
                height:200px;
                background-color:#EEEEEE;
            }
            
            #left { float: left;} 
			#right { float: right;} 
        </style>       
    </head>
    <body>
        <div id="svgContainer"></div>
        <div id="blur-image-demo">
        	<div id="left" style="width:20%;"><img src="woniu.png" alt="Original image" width="325" height="471"></div>
        	<div id="right" style="width:80%;">
		        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
				  <defs>
				    <filter id="f1" x="0" y="0">
				      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
				    </filter>
				  </defs>
				  <image x="0" y="0" width="325" height="471" xlink:href="woniu.png" filter="url(#f1)"/>
				</svg>
			</div> 
		</div>
    </body>
</html>
转载请务必注明出处

分享到：
| 通过JavaScript和CSS使Table居中显示
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于SVG的web页面图形绘制API介绍及编程演示

    SVG的全称是可扩展的矢量图形跟传统的Raster方式的图形(JPG, PNG, GIF等)有很大的差别，下面与大家分享下JavaScript中SVG API编程演示，感兴趣的朋友可以参考下哈

    jquery图形插件raphael

    可以轻松实现SVG能实现的功能，在WEB前端进行绘制图形，由于SVG只能在IE9以上使用，该插件兼容了IE9以下版本使用VML进行绘制，而且操作比SVG更加简单，是绘制WEB自定义图形的较好的插件，内含有中文API。

    HTML5程序设计（第2版）.[荷]Peter Lubbers(带详细书签).pdf

    本书在上一版的基础上新增了SVG和拖放API相关内容，并对部分内容进行了更新。从第 2章起，分别围绕构建令人神往的富Web 应用，逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers...

    Zdog:用于画布和 SVG 的扁平、圆形、设计师友好的伪 3D 引擎-开源

    Zdog 是一个 3D JavaScript 引擎，用于和 SVG。 使用 Zdog，您可以在 Web 上设计和渲染简单的 3D 模型。 Zdog 是一个伪 3D 引擎。 它的几何图形存在于 3D 空间中，但被渲染为平面形状。 这让 Zdog 与众不同。 Zdog很...

    Highcharts-8.1.2.zip

    在现代的浏览器中使用 SVG 技术进行图形绘制，在低版本 IE 则使用 VML 进行图形绘制。 free非商业使用免费 在个人网站、学校网站及非盈利机构中使用 Highcharts 完全不需要经过我们的许可，直接可以任意使用！ ...

    FrontApplication:前端开发 极客学院 笔记

    初级WEB前端工程师 51课程 20小时20分 走进前端工程师的世界 1.走进前端工程师的世界 ...7.HTML5 增强的页面元素 8.HTML5 编辑 API 之 Range 对象（一） ...15.HTML5 Canvas 图形绘制处理 16.HTML5 Canvas 应用 17.SVG 18.

    looom-tools

    :sparkles: Web导出器→ 机房是适用于iOS平板电脑的实验性动画软件，可让您绘制和制作短循环动画，如下所示：这是Looom随附的“地球”循环这些图形被记录为矢量形状，并在iPad上另存为SVG，因此可以从“文件”应用...

    html5使用Canvas绘图的使用方法

    一、什么是Canvas Canvas 是H5的一部分，允许脚本语言动态渲染图像。Canvas 定义一个区域，可以由html属性定义该区域的宽高，javascript代码...当然，使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。 字体

    面貌：在JSON API支持下，在浏览器中绘制图表收集的指标

    特征使用SVG在浏览器中呈现图形，并异步检索数据易于建立，订购和共享图形集合的界面交互式图形元素-切换线可见性，检查准确的时间点数据下拉或鼠标选择时间范围JSON接口到已收集的RRD上使用收集的rrdtool插件或...

    JAVA上百实例源码以及开源项目

    　Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...

    JAVA上百实例源码以及开源项目源代码

    　Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...

    Your Graphic Designer-crx插件

    矢量，svg油漆和编辑器，图编辑器 - 使用直观和简单的工具绘制来绘制和设计 版本2.9.1 - 删除了在在线照片编辑中导入Web映像的支持使用上下文菜单版本2.9.0 - 现在您可以将SVG项目保存为HTML格式版本2.8.9.2 - 出于...

    maker.js:CNC CNC和激光切割机的2D矢量线图绘制和形状建模

    最初指定用于CNC和激光切割机的Maker.js还可以帮助您以编程方式为任何目的绘制形状。 它可以在Node.js和Web浏览器中运行。 2D导出格式： ， ， ， 3D导出格式： ， ， -核心概念-工程图中的基本元素是直线，圆弧和...

Magicbox
Global site tag (gtag.js) - Google Analytics