如何獲得svg文件的內(nèi)嵌svg的文檔對(duì)象

2024-09-06 19:57:08

字體：大中小

供稿：網(wǎng)友

svg文件內(nèi)容如下：（說(shuō)明：用的不是adobe的SVG，不支持內(nèi)嵌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> 

對(duì)以上svg文件做簡(jiǎn)單說(shuō)明：就是當(dāng)顯示倍率在1-600時(shí)會(huì)調(diào)用Modelh0.svg文件，當(dāng)倍率在3000以上會(huì)調(diào)用Hendensyo.svg文件?，F(xiàn)在我們要對(duì)Hendensyo.svg做動(dòng)態(tài)的處理，但不知如何獲得內(nèi)嵌的svg的文檔對(duì)象?，F(xiàn)在我的做法是將內(nèi)嵌的svg文件用html中的javascript解析xml的方法來(lái)解析，取得節(jié)點(diǎn)對(duì)象后動(dòng)態(tài)修改對(duì)象的屬性（如：setAttribute('fill','red')），但修改后好像沒(méi)反應(yīng)（解析方法是沒(méi)錯(cuò)的，節(jié)點(diǎn)都能取到），不知道是為什么，是不是當(dāng)成xml解析動(dòng)態(tài)修改對(duì)象屬性對(duì)svg是沒(méi)用的呢，一定要用svgdocument的文檔對(duì)象來(lái)動(dòng)態(tài)修改呢？郁悶阿，誰(shuí)叫我們的svg不支持javascript只能用html中的javascript,調(diào)查了幾天了也沒(méi)結(jié)果，高手幫幫忙啊，謝謝。

---
經(jīng)過(guò)測(cè)試，是可以進(jìn)行修改的。下面是測(cè)試的代碼：注意，為簡(jiǎn)單起見(jiàn)，所有文件放在了一個(gè)文件夾下，測(cè)試環(huán)境為 IE7+ADOBE SVG Viewer 3.03 簡(jiǎn)體中文版。

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>