如何獲得svg文件的內嵌svg的文檔對象

2024-09-06 19:57:08

字體：大中小

來源：轉載

供稿：網友

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>