svg的应用二

最新推荐文章于 2024-05-09 14:43:18 发布

阿发博客

最新推荐文章于 2024-05-09 14:43:18 发布

阅读量1k

点赞数 1

分类专栏：工作 js 文章标签： xml svg 矢量图 java inkscape

本文链接：https://blog.csdn.net/chuanren1991/article/details/50788273

版权

js 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

工作

1 篇文章 0 订阅

订阅专栏

随着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，自强学堂等地方查找，个人比较喜欢自强学堂。比如手打代码

<span style="font-size:18px;"><html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"></rect>
</svg>
</body>
</html></span>

这样就能生成一个svg的矩形，svg是xml语言的，还是很简单易学的，不过鉴于效率问题，还是提倡实用工具画图。

工作需要的功能是，点击图片中的某个东西，使这个东西变色，并弹出弹窗显示某些内容。

首先说如何在svg中引入js代码。你可以直接在svg中写js代码，不过这样太麻烦，完全不如引入js文件来的简单。这是直接在svg中嵌入js代码，与html一样直接包含在script标签内就行了

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8" standalone="no" ?>  
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" οnlοad="init(evt)" οnclick="Click(evt)">  
<mce:script type="text/javascript"><!--  
var svgDoc = null ;  
var svgRoot = null ;  
var parentWnd = null ; //保存html的window对象  
//初始化  
function<span style="color:#ff0000;"> init(evt)</span>  
{  
  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对象  
}  
// --></mce:script>  
  <rect id="background" x="0" y="0" width="100%" height="100%" fill="gray" />  
  <rect id="rect" x="50" y="50" width="100" height="100" fill="green" />  
  <text font-family="SimSun" font-size="14" fill="yellow" x="50" y="50" id="text">单击svg的矩形，设置html的text文本内容</text>  
</svg>  
 </span>

如何引入，将script中的src改为xlink:href就行了

<span style="font-size:18px;"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="100%"
   height="100%"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="test1.svg"
   οnlοad="init(evt)"
   >
   <svg viewBox="0 0 1920 1018" preserveAspectRatio="xMidYMid meet">
   <span style="color:#ff0000;"><script language="JavaScript" xlink:href="svg_home.js" /></span></span>

让某部分变色，这个也没啥难度，关键在于你进行svg代码编写或者工具生成时，一定要记住或者标记号你要操作的部分的id

比如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函数  
}

上面这段代码是放在了html中的js代码。我想智商在100以上的大神们都能看懂是什么意思。
详情请看大神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来设置元素的属性。