如何获得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>