SVG的全称是可扩展的矢量图形跟传统的Raster方式的图形(JPG
PNG
GIF等)有很大的差别
下面与大家分享下JavaScript中SVG API编程演示
感兴趣的朋友可以参考下哈
一什么是SVG SVG是
由W
C发布的
D图形描述语言
纯基于XML格式的标记语言
SVG的
全称是可扩展的矢量图形跟传统的Raster方式的图形(JPG
PNG
GIF等)有很大的差
别
SVG是
D图形开发平台
包括两个部分
一个是基于XML语言的数据描述
另
外一部分是可编程的API
其关键特性支持图形
文本
梯度填充
画笔风格
图形
特效滤镜如高斯模糊
会在稍后的代码中演示
同时还支持各种鼠标事件与DOM部
分API
几乎所有的主流浏览器都支持SVG图形格式的现实与绘制
IE
+以上也开始
支持SVG
在低版本的IE中需要插件支持
更多了解SVG访问这里
二JavaScript中SVG API编程演示 创建与获取SVG对象
复制代码 代码如下:
// create svg object
var mySvg = document
createElementNS("
"svg");
mySvg
setAttribute("version"
"
");// IE
+ support SVG
version
mySvg
setAttribute("baseProfile"
"tiny");
container
appendChild(mySvg);
在SVG中创建一个矩形图形
复制代码 代码如下:
var c
= document
createElementNS("
"rect");
c
setAttribute("x"
"
");
c
setAttribute("y"
"
");
c
setAttribute("width"
"
");
c
setAttribute("height"
"
");
c
setAttribute("fill"
"rgb(
)");
c
setAttribute("stroke"
"rgb(
)");
c
setAttribute("stroke
width"
"
");
mySvg
appendChild(c
);
在SVG中实现文本绘制
复制代码 代码如下:
// SVG draw text
var stext = document
createElementNS("
"text");
stext
setAttribute("x"
"
");
stext
setAttribute("y"
"
");
stext
setAttribute("font
size"
"
px");
stext
setAttribute("fill"
"#FF
");
var textString = document
createTextNode("Hello SVG");
stext
appendChild(textString);
mySvg
appendChild(stext);
在SVG对象上实现鼠标点击事件处理与MouseUp事件处理
复制代码 代码如下:
// mouse event handling
c
addEventListener("click"
changeColor
false);
c
addEventListener("mouseup"
changeColor
false);
通过SVG 图形滤镜实现高斯模糊
复制代码 代码如下:
<div id="blur
image
demo">
<div id="left" style="width:
%;"><img src="woniu
png" alt="Original image" width="
" height="
"></div>
<div id="right" style="width:
%;">
<svg xmlns="
<defs>
<filter id="f
" x="
" y="
">
<feGaussianBlur in="SourceGraphic" stdDeviation="
" />
</filter>
</defs>
<image x="
" y="
" width="
" height="
" xlink:href="woniu
png" filter="url(#f
)"/>
</svg>
</div>
</div>
运行效果
源代码
可以copy直接运行
JavaScript部分
复制代码 代码如下:
window
onload = function() {
// get DIV
var container = document
getElementById("svgContainer");
// create svg object
var mySvg = document
createElementNS("
"svg");
mySvg
setAttribute("version"
"
");// IE
+ support SVG
version
mySvg
setAttribute("baseProfile"
"tiny");
container
appendChild(mySvg);
// create svg shape
rectangle
var c
= document
createElementNS("
"rect");
c
setAttribute("x"
"
");
c
setAttribute("y"
"
");
c
setAttribute("width"
"
");
c
setAttribute("height"
"
");
c
setAttribute("fill"
"rgb(
)");
c
setAttribute("stroke"
"rgb(
)");
c
setAttribute("stroke
width"
"
");
mySvg
appendChild(c
);
// create svg shape
circle
var c
= document
createElementNS("
"circle");
c
setAttribute("cx"
"
");
c
setAttribute("cy"
"
");
c
setAttribute("r"
"
");
c
setAttribute("fill"
"#
");
c
setAttribute("stroke"
"#AA
FF");
c
setAttribute("stroke
width"
"
");
mySvg
appendChild(c
);
// create svg shape
ellipse
var c
= document
createElementNS("
"ellipse");
c
setAttribute("cx"
"
");
c
setAttribute("cy"
"
");
c
setAttribute("rx"
"
");
c
setAttribute("ry"
"
");
c
setAttribute("fill"
"#FF
");
c
setAttribute("stroke"
"purple");
c
setAttribute("stroke
width"
"
");
mySvg
appendChild(c
);
// create svg shape
draw lines
for(var i=
; i<
; i++)
{
var sline = document
createElementNS("
"line");
var x
=
+ i*
;
console
log(x
);
sline
setAttribute("x
"
x
toString());
sline
setAttribute("y
"
"
");
sline
setAttribute("x
"
x
toString());
sline
setAttribute("y
"
"
");
sline
setAttribute("stroke"
"rgb(
)");
sline
setAttribute("stroke
width"
"
");
mySvg
appendChild(sline);
}
// SVG draw text
var stext = document
createElementNS("
"text");
stext
setAttribute("x"
"
");
stext
setAttribute("y"
"
");
stext
setAttribute("font
size"
"
px");
stext
setAttribute("fill"
"#FF
");
var textString = document
createTextNode("Hello SVG");
stext
appendChild(textString);
mySvg
appendChild(stext);
// mouse event handling
c
addEventListener("click"
changeColor
false);
c
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:
px;
height:
px;
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:
%;"><img src="woniu
png" alt="Original image" width="
" height="
"></div>
<div id="right" style="width:
%;">
<svg xmlns="
<defs>
<filter id="f
" x="
" y="
">
<feGaussianBlur in="SourceGraphic" stdDeviation="
" />
</filter>
</defs>
<image x="
" y="
" width="
" height="
" xlink:href="woniu
png" filter="url(#f
)"/>
</svg>
</div>
</div>
</body>
</html>
