一:什么是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>
转载请务必注明出处
分享到:
相关推荐
SVG的全称是可扩展的矢量图形跟传统的Raster方式的图形(JPG, PNG, GIF等)有很大的差别,下面与大家分享下JavaScript中SVG API编程演示,感兴趣的朋友可以参考下哈
可以轻松实现SVG能实现的功能,在WEB前端进行绘制图形,由于SVG只能在IE9以上使用,该插件兼容了IE9以下版本使用VML进行绘制,而且操作比SVG更加简单,是绘制WEB自定义图形的较好的插件,内含有中文API。
本书在上一版的基础上新增了SVG和拖放API相关内容,并对部分内容进行了更新。从第 2章起,分别围绕构建令人神往的富Web 应用,逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers...
Zdog 是一个 3D JavaScript 引擎,用于和 SVG。 使用 Zdog,您可以在 Web 上设计和渲染简单的 3D 模型。 Zdog 是一个伪 3D 引擎。 它的几何图形存在于 3D 空间中,但被渲染为平面形状。 这让 Zdog 与众不同。 Zdog很...
在现代的浏览器中使用 SVG 技术进行图形绘制,在低版本 IE 则使用 VML 进行图形绘制。 free非商业使用免费 在个人网站、学校网站及非盈利机构中使用 Highcharts 完全不需要经过我们的许可,直接可以任意使用! ...
初级WEB前端工程师 51课程 20小时20分 走进前端工程师的世界 1.走进前端工程师的世界 ...7.HTML5 增强的页面元素 8.HTML5 编辑 API 之 Range 对象(一) ...15.HTML5 Canvas 图形绘制处理 16.HTML5 Canvas 应用 17.SVG 18.
:sparkles: Web导出器→ 机房是适用于iOS平板电脑的实验性动画软件,可让您绘制和制作短循环动画,如下所示:这是Looom随附的“地球”循环这些图形被记录为矢量形状,并在iPad上另存为SVG,因此可以从“文件”应用...
一、什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码...当然,使用SVG(可缩放矢量图形)来完成图表制作也是非常好的方法。 字体
特征使用SVG在浏览器中呈现图形,并异步检索数据易于建立,订购和共享图形集合的界面交互式图形元素-切换线可见性,检查准确的时间点数据下拉或鼠标选择时间范围JSON接口到已收集的RRD上使用收集的rrdtool插件或...
Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...
Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...
矢量,svg油漆和编辑器,图编辑器 - 使用直观和简单的工具绘制来绘制和设计 版本2.9.1 - 删除了在在线照片编辑中导入Web映像的支持使用上下文菜单版本2.9.0 - 现在您可以将SVG项目保存为HTML格式版本2.8.9.2 - 出于...
最初指定用于CNC和激光切割机的Maker.js还可以帮助您以编程方式为任何目的绘制形状。 它可以在Node.js和Web浏览器中运行。 2D导出格式: , , , 3D导出格式: , , -核心概念-工程图中的基本元素是直线,圆弧和...