如何获得svg文件的内嵌svg的文档对象

svg文件内容如下：（说明：用的不是adobe的SVG，不支持内嵌javascript）
+展开
-XML
<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:go="http://purl.org/svgmap/svgmap#"> 
<metadata> 
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:crs="http://www.ogc.org/crs" xmlns:svg="http://www.w3.org/svg" > 
  <rdf:Description> 
  <crs:CoordinateReferenceSystem rdf:resource="http://purl.org/crs/84"  svg:transform="matrix(330.0,0.0,0.0,-320.0,-45710.0,12400.0)" /> 
  </rdf:Description> 
</rdf:RDF> 
</metadata> 
<g go:figure-visibility="1,600"> 
  <image xlink:href="Modelh0.svg"/> 
</g> 
<g go:figure-visibility="600,3000"> 
  <image xlink:href="Modelh1.svg"/> 
</g> 
<g id="Kaigan" go:figure-visibility="1,2000"> 
  <image xlink:href="Jp.svg"/> 
</g> 
<g id="HDS" go:figure-visibility="3000"> 
  <image id="img_hds" xlink:href="ModelHendensyo/Hendensyo.svg"/> 
</g> 
<g go:figure-visibility="3000"> 
  <image xlink:href="ModelSen/SenContainer.svg"/> 
</g> 
<g id="Ten" go:figure-visibility="3000"> 
  <image xlink:href="ModelTen/TenContainer.svg"/> 
</g> 
<g id="Kukan" go:figure-visibility="3000"> 
  <image xlink:href="ModelKukan/KukanContainer.svg"/> 
</g> 
</svg> 
对以上svg文件做简单说明：就是当显示倍率在1-600时会调用Modelh0.svg文件，当倍率在3000以上会调用Hendensyo.svg文件。现在我们要对Hendensyo.svg做动态的处理，但不知如何获得内嵌的svg的文档对象。现在我的做法是将内嵌的svg文件用html中的javascript解析xml的方法来解析，取得节点对象后动态修改对象的属性（如：setAttribute('fill','red')），但修改后好像没反应（解析方法是没错的，节点都能取到），不知道是为什么，是不是当成xml解析动态修改对象属性对svg是没用的呢，一定要用svgdocument的文档对象来动态修改呢？郁闷阿，谁叫我们的svg不支持javascript只能用html中的javascript,调查了几天了也没结果，高手帮帮忙啊，谢谢。

---
经过测试，是可以进行修改的。下面是测试的代码：注意，为简单起见，所有文件放在了一个文件夹下，测试环境为 IE7+ADOBE SVG Viewer 3.03 简体中文版。

top.html
+展开
-HTML
<!!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
var map;
function load()
{
    map = document.getElementById("map");                
    var svg = map.getSVGDocument().documentElement;
    
    for(i = 0;i    {                    
        if(svg.childNodes.item(i).localName == 'g')
        {                        
            var im = map.getSVGDocument().getElementById("m")
            if(im)
            {                            
                alert("here")
                im.setAttributeNS("http://www.w3.org/1999/xlink","href","http://localhost/aa/jsp/Modelh1.svg")
                
                break;
                }
            }
        }        
}        
</script>         
</head>
<body>    
<table style="width:100%; height: 100%; frame="vsides" border="1" cellspacing="0" cellpadding="0">
<tr>
    <td align="center"><input onclick="load()" type="button" value="更换 SVG"></td>
    <td style="width:80%; height:100%">
        <embed id="map" src="top_svg.svg" type="image/svg+xml" width="100%" height="100%" />
    </td>    
</tr>
</table>
</body>
</html>



top_svg.svg
+展开
-XML
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
  <image id="m" x="0" y="0" width="100%" height="100%" xlink:href="Modelh0.svg"/>
</g>
</svg>


Modelh0.svg
+展开
-XML
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     baseProfile="full">
<circle cx="102"  cy="112"  r="43"  stroke="red"  stroke-width="1"  fill="blue"  /> 
</svg>




Modelh1.svg
+展开
-XML
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="10.0 5.0 70.0 60.0">
<defs>
<g id="h">
<circle cx="0.0" cy="0.0" r="0.09" stroke-width="0.01" stroke="red" fill="none"/>
</g>
</defs>
<g id="HDS" font-size="0.1625" text-anchor="middle" fill="green" stroke="none">
<use xlink:href="#h"  x="2.8089" y="40.0327"/>
<text x="42.8089" y="40.0327">AAAAAAAAAAAAA</text>
<use xlink:href="#h"  x="44.0539" y="36.7566"/>
<text x="44.0539" y="36.7566">杒挿壀</text>
<use xlink:href="#h"  x="41.7003" y="39.4506"/>
<text x="41.7003" y="39.4506">戝庤</text>
<use xlink:href="#h"  x="40.7055" y="42.3390"/>
<text x="40.7055" y="42.3390">媨撪挰</text>
<use xlink:href="#h"  x="34.0845" y="37.3258"/>
<text x="34.0845" y="37.3258">擔媑</text>
<use xlink:href="#h"  x="38.7993" y="36.6885"/>
<text x="38.7993" y="36.6885">楡妰</text>
<use xlink:href="#h"  x="34.8959" y="46.1122"/>
<text x="34.8959" y="46.1122">棃寎帥</text>
<use xlink:href="#h"  x="36.1010" y="41.9096"/>
<text x="36.1010" y="41.9096">嵥捗</text>
<use xlink:href="#h"  x="35.6104" y="54.4805"/>
<text x="35.6104" y="54.4805">彫愮扟</text>
<use xlink:href="#h"  x="46.2088" y="30.5415"/>
<text x="46.2088" y="30.5415">惣尒晬</text>
<use xlink:href="#h"  x="53.6704" y="35.2590"/>
<text x="53.6704" y="35.2590">撊旜</text>
<use xlink:href="#h"  x="55.3671" y="38.0249"/>
<text x="55.3671" y="38.0249">搶撊旜</text>
<use xlink:href="#h"  x="42.2220" y="37.0212"/>
<text x="42.2220" y="37.0212">忛壀</text>
<use xlink:href="#h"  x="37.9013" y="56.3179"/>
<text x="37.9013" y="56.3179">搶彫愮扟</text>
<use xlink:href="#h"  x="24.8707" y="38.6493"/>
<text x="24.8707" y="38.6493">楃攓</text>
<use xlink:href="#h"  x="15.5663" y="48.6831"/>
<text x="15.5663" y="48.6831">攼嶈</text>
<use xlink:href="#h"  x="47.8286" y="29.6380"/>
<text x="47.8286" y="29.6380">尒晬</text>
<use xlink:href="#h"  x="16.4803" y="47.5545"/>
<text x="16.4803" y="47.5545">斾妏</text>
<use xlink:href="#h"  x="17.1137" y="49.5255"/>
<text x="17.1137" y="49.5255">堬栚</text>
<use xlink:href="#h"  x="35.7663" y="24.6782"/>
<text x="35.7663" y="24.6782">嬎搰</text>
<use xlink:href="#h"  x="47.4352" y="16.1752"/>
<text x="47.4352" y="16.1752">墠</text>
<use xlink:href="#h"  x="59.1949" y="15.3451"/>
<text x="59.1949" y="15.3451">壛栁</text>
<use xlink:href="#h"  x="52.4781" y="20.1009"/>
<text x="52.4781" y="20.1009">搶嶰忦</text>
<use xlink:href="#h"  x="50.7580" y="18.4920"/>
<text x="50.7580" y="18.4920">杒嶰忦</text>
<use xlink:href="#h"  x="56.5097" y="25.9487"/>
<text x="56.5097" y="25.9487">壓揷</text>
<use xlink:href="#h"  x="49.6783" y="20.1584"/>
<text x="49.6783" y="20.1584">惣嶰忦</text>
<use xlink:href="#h"  x="48.2518" y="22.5531"/>
<text x="48.2518" y="22.5531">塰</text>
<use xlink:href="#h"  x="57.5457" y="13.4612"/>
<text x="57.5457" y="13.4612">壛栁嫿</text>
<use xlink:href="#h"  x="40.8507" y="20.1421"/>
<text x="40.8507" y="20.1421">抧憼摪</text>
<use xlink:href="#h"  x="44.5348" y="12.1424"/>
<text x="44.5348" y="12.1424">媑揷</text>
<use xlink:href="#h"  x="48.7872" y="16.9454"/>
<text x="48.7872" y="16.9454">岦墠</text>
<use xlink:href="#h"  x="49.6070" y="16.1427"/>
<text x="49.6070" y="16.1427">搶墠</text>
<use xlink:href="#h"  x="40.7248" y="47.8819"/>
<text x="40.7248" y="47.8819">撿挿壀</text>
<use xlink:href="#h"  x="29.0440" y="55.2992"/>
<text x="29.0440" y="55.2992">彫崙挰</text>
<use xlink:href="#h"  x="46.6518" y="60.9008"/>
<text x="46.6518" y="60.9008">杧擵撪</text>
<use xlink:href="#h"  x="44.9569" y="15.9450"/>
<text x="44.9569" y="15.9450">彫娭</text>
<use xlink:href="#h"  x="56.1732" y="17.3933"/>
<text x="56.1732" y="17.3933">曐撪</text>
<use xlink:href="#h"  x="53.7214" y="11.5060"/>
<text x="53.7214" y="11.5060">怴斞揷</text>
<use xlink:href="#h"  x="40.1731" y="6.3561"/>
<text x="40.1731" y="6.3561">娾幒</text>
<use xlink:href="#h"  x="69.7874" y="33.1004"/>
<text x="69.7874" y="33.1004">導塩妢杧</text>
</g>
</svg>



这里使用

JScript codevar im = map.getSVGDocument().getElementById("m")

只是简单起见，还可以用其他的方法获得


+展开
-JavaScript
im.setAttributeNS("http://www.w3.org/1999/xlink","href","http://localhost/aa/jsp/Modelh1.svg")



可以改成，刚才没仔细看，把整个路径贴上了

+展开
-JavaScript
im.setAttributeNS("http://www.w3.org/1999/xlink","href","Modelh1.svg")



加支付宝好友偷能量挖...


评论(0)网络
阅读(156)喜欢(0)Canvas/VML/SVG