SVG：HTML5中的矢量图形魅力
SVG是HTML5中的一个重要特性，它是一种可缩放矢量图形技术，允许开发者通过XML文件格式创建和控制图形。SVG提供了丰富的图形操作接口，包括点线面的基本图形和图像属性如颜色、透明度等。相较于传统的web图片设计，SVG具有可缩放和高质量显示的优势，尤其适合用于动画和交互式设计。
学习HTML5中的特性，给人眼前一亮的东东就是HTML中加入了“画布”的概念，使得原来页面中需要使用切图片来制作的效果现在只是去控制“画”就能达到相同甚至超出想象
的体验效果，简单的理解可以认为浏览器已经像Flash那样可以开发动画，甚至动画中还可以使用传统web页面开发中的一切脚本事件、方法等。
SVG感觉是HTML5中一大创新支持，可能大多数人了解canvas，单个人认为svg是支持canvas的底层实现的基础。简单的理解svg就是浏览器以XML文件格式暴露出的一组画图接口，svg提供了点线面的基本图形操作，以及图形像素、颜色、alpha 等一系列图像基本属性的操作接口。当然这只是个人对svg的一部分理解，svg 本意是：可缩放矢量图形(Scalable Vector Graphics,SVG)，这也是SVG在应用上与传统web图片设计对比不可替代的优势。
学习了一下SVG，个人感觉的确很强大，下面就是我一些学习心得，记录一下，以免以后忘记。
首先介绍下SVG格式（后缀名 svgDemo.SVG）：
<?xml version="1.0" ?>
<svg width="200" height="200" style="cursor:pointer; border:1px solid red;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Cat</title>
<desc>Stick Fihure of a Cat</desc>
<g >
<circle id="yuan" cx="70" cy="95" r="20" style="stroke:black;fill:none;"></circle>
</g>
</svg>
支持HTML5的主流浏览器基本都已经支持SVG了，SVG在页面中5种调用方式：
1、使用传统img标签调用
<img src="svgDemo.SVG" id="emSvg" width="200"/>
2、embed调用
<embed id="emSvg" src="svgDemo.SVG" wmode="transparent"/>
3、 iframe调用
<iframe id="emSvg" src="svgDemo.SVG"></iframe>
4、object调用
<object id="emSvg" data="svgDemo.SVG" type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
5、页面直接内嵌
<svg width="200" height="200" style="cursor:pointer; " xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Cat</title>
<desc>Stick Fihure of a Cat</desc>
<g >
<circle id="yuan" cx="70" cy="95" r="20" style="stroke:black;fill:none;"></circle>
</g>
</svg>
上面5种使用有所不同，img的调用方式，svg只会是张图片，不能使用js去控制svg，放大缩小感觉不会失真（本人谷歌浏览器下放大400倍看的效果），其余的几种方式基本差不多一样，矢量图，可以已使用js控制svg中的XML元素，具体介绍如下：
embed
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title></title>
</head>
<body>
<form id="form1" >
<div>
<input value="点击圆变成红色" style=" border:1px solid red;" type="button" onclick="SVGfun()" />
<embed id="emSvg" src="svgDemo.SVG" wmode="transparent"/>
</div>
</form>
</body>
</html>
<script type="text/javascript">
function SVGfun() {
var svg = document.getElementById("emSvg").getSVGDocument();
if (svg == null) return;
var svgRoot = svg.documentElement;
var yuan = svgRoot.getElementById('yuan');
if (yuan) yuan.setAttribute('style', 'stroke:red;fill:none;');
}
</script>
iframe
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title></title>
</head>
<body>
<form id="form1" >
<div>
<input value="点击圆变成红色" style=" border:1px solid red;" type="button" onclick="SVGfun()" />
<iframe id="emSvg" src="svgDemo.SVG"></iframe>
</div>
</form>
</body>
</html>
<script type="text/javascript">
function SVGfun() {
var svg = document.getElementById("emSvg").getSVGDocument();
if (svg == null) return;
var svgRoot = svg.documentElement;
var yuan = svgRoot.getElementById('yuan');
if (yuan) yuan.setAttribute('style', 'stroke:red;fill:none;');
}
</script>
object
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title></title>
</head>
<body>
<form id="form1" >
<div>
<input value="点击圆变成红色" style=" border:1px solid red;" type="button" onclick="SVGfun()" />
<object id="emSvg" data="svgDemo.SVG" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
function SVGfun() {
var svg = document.getElementById("emSvg").getSVGDocument();
if (svg == null) return;
var svgRoot = svg.documentElement;
var yuan = svgRoot.getElementById('yuan');
if (yuan) yuan.setAttribute('style', 'stroke:red;fill:none;');
}
</script>
另外js代码也可以直接写在SVG的XML文件中，出了img调用时无效果，其余的都是可以执行的，代码如下：
<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg onmousemove="SVGfun(event)" onmouseout="SVGfun1()" width="200" height="200" style="cursor:pointer;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/javascript">
<![CDATA[
<!--onmousemove事件调用-->
function SVGfun(e) {
var x=e.clientX;
var y=e.clientY;
var yuan = document.getElementById("yuan");
if (yuan){
yuan.setAttribute('style', 'stroke:red;fill:none;');
yuan.setAttribute('cx', x);
yuan.setAttribute('cy', y);
}
}
<!--onmouseout事件调用-->
function SVGfun1() {
var yuan = document.getElementById("yuan");
if (yuan) yuan.setAttribute('style', 'stroke:black;fill:none;');
}
]]>
</script>
<title>Cat</title>
<desc>Stick Fihure of a Cat</desc>
<g >
<circle id="yuan" cx="70" cy="95" r="20" style="stroke:black;fill:none;"></circle>
</g>
</svg>
SVG除了支持js写动画效果以外，自身也带有写动画的标签配置，这是我在网上搜的一个效果DEMO，仅供参考，另外说明一下，SVG自带动画的效果img是支持的，使用img调用的时候可以看到动画效果，img只是不支持js写出的动画效果以及事件。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="3cm" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<desc>Example animMotion01 - demonstrate motion animation computations</desc>
<rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" />
<!-- Draw the outline of the motion path in blue, along with three small circles at the start, middle and end. -->
<path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" />
<circle cx="100" cy="250" r="17.64" fill="blue" />
<circle cx="250" cy="100" r="17.64" fill="blue" />
<circle cx="400" cy="250" r="17.64" fill="blue" />
<!-- Here is a triangle which will be moved about the motion path. It is defined with an upright orientation with
the base of the triangle centered horizontally just above the origin. -->
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" >
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#path1"/>
</animateMotion>
</path>
</svg>
提示：以上Demo请在新版火狐或者谷歌等支持HTML5的浏览器中查看效果，我本机是IE8完全没效果，IE9以及以上本人还没测试，火狐谷歌都测试通过！
扫一扫
1029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
