svg的应用二
随着html5的火热，svg作为flash的替代品出现，我也是最近两天才开始研究的，还没学会如何用inkscape这种专业的svg制作工具进行矢量图的制作，只是学会了如何将png格式的图片转换为svg矢量图，这个很简单，之前谢了一片文章介绍了如何制作。不再赘述。
这两天在研究如何对svg对象进行操作，比如让图片的某一部分点击时变亮，或者打开弹窗等等。经朋友介绍，说有现成的api，一番搜索，知道了snap.svg这个工具，大感很爽，前人栽树后人乘凉，后又发现，大神“鑫哥”早在13年就对snap的api进行了全中文且纠正式的总结，他用了两个星期的时间研究了snap官方api列举的所有功能，并一一进行了实验，得到了相关结果，并对之进行了总结，发现官方的文档在当时来说讲解的一塌糊涂。于是有了这个http://www.zhangxinxu.com/GitHub/demo-Snap.svg/demo/basic/Element.add.php，膜拜啊。不过我还未对鑫哥的成果做具体的学习研究，因为我要做的项目所使用的功能很单一，并不需要太强大的技术支持。于是我自行进行了研究，当然并不知道自己的方式对不对，算不算正统，但是白猫黑猫抓住老鼠就是好猫，不管怎样，我还是达到了我想要达到的目的。
首先你要弄到一个你需要的svg文件，当然你也可以自己手打，关于svg的教程可以到w3c，自强学堂等地方查找，个人比较喜欢自强学堂。比如手打代码
工作需要的功能是，点击图片中的某个东西，使这个东西变色，并弹出弹窗显示某些内容。
首先说如何在svg中引入js代码。你可以直接在svg中写js代码，不过这样太麻烦，完全不如引入js文件来的简单。这是直接在svg中嵌入js代码，与html一样直接包含在script标签内就行了
比如id为kyj_1的g标签内的元素就是我要操作的内容，记住这个id号，里面的path便是图片路径，这是要变色的主体
这个g标签内共有7个path标签，也就是说这要操作的部分是由这7个路径描绘出来的，可以看到path也是有自己的id号的，这个可以供你来进行操作
首先如果是直接在内部来更改某些元算的属性，很简单，你直接可以用js代码得到这个元素比如dom中
var path = document.getElementById("path3593");
然后path.什么什么
如何在外部进行对svg元素操作呢，这就需要将在外部获得svg的内部dom节点，一开始我也不理解明明svg与其他html元素都包含在了一个html文件中为什么还不能用同一个document对象获得dom节点呢。后来通过一个功能才了解了，原因是，html与在html中引入的svg对象不在同一个window对象里，也就是说它们处在不同的窗口里。引入的svg相当于在一个新的窗口里展开的，只不过是内嵌到了html的窗口中，所以想要得到svg的dom我们需要做一番操作
var svgDoc = null ;
var svgRoot = null ;
var parentWnd = null ; //保存html的window对象
//初始化
function init(evt)
{
svgDoc = evt.target.ownerDocument ;
svgRoot = svgDoc.documentElement ; //在html中的第二种交互方式会用到
parentWnd = window.parent ; //ASV 3.0可以这么写。英文6.0版的要换种写法
if(parentWnd.document.title == null || parentWnd.document.title == '')
{
alert("请不要直接在浏览器中打开‘svg’文档！");
//下面的代码作用是不提示确认关闭窗口
parentWnd.opener = null ;
parentWnd.open('', '_self') ;
parentWnd.close() ;
}
svgDoc.svgWnd = window ; //这里人为进行设定，以便在html中的第一种交互方式中可以取的到svg的window对象
}所谓的第一种交互方式是这样的
function Btn1Clk()
{
//第一种方式
svgDoc = emSvg.getSVGDocument() ;
if(svgDoc == null) return ;
svgRoot = svgDoc.documentElement ;
if(svgRoot == null) return ;
var rect = svgRoot.getElementById('rect') ;
if(rect) rect.setAttribute('fill', 'blue') ;
svgWnd = svgDoc.svgWnd ; //这个window对象是在svg的初始化里面添加进去的
if(svgWnd) svgWnd.FunCallByHtmlJs() ; //调用svg里的js函数
} 详情请看大神http://blog.csdn.net/guanghua2009/article/details/6643958 对svg进行初始化，
图中svg标签的各项属性并不是必须的有些是用不到的，由于是工具自动生成，懒得去改了，这不是重点，绕过。
这样我们就可以在svg的js里调用html中的js对象了
function showPop(obj){
//alert(obj.id);
if(parentWnd)
{
parentWnd.changeClass(obj.id) ; //调用html中的js函数
}
}
changeClass是html中js的函数，这样我们就可以通过调用外部函数的方式达到很多目的了，此处就是弹出弹窗的功能函数
下面是在html中调用svg的dom节点
红框中的是重点，通过getSVGDocument获得svg的dom节点，应该是svg节点数组的地址，如果相得到某个具体的元素节点，还要通过getELementById();获得
var svgdoc = document.getElementById("svg1").getSVGDocument();//获得svg中的dom节点，“svg1”是引入svg文件的元素的id
//通过setAttribute方法来给svg元素的属性赋值
svgdoc.getElementById("path"+(pathId+2)).setAttribute("style", "fill: #908A3E");//左侧网格填充色
通过setAttribute来设置元素的属性。