I am not sure the subject can explain my question.
In my project, i refered a svg document from a html page. Now, I want to
manipulate the SVG using javascript methods from html. following is code
fragment.
In map.html I want to call method hideLayer() that wrote in map.svg.
map.svg locates in iFrame, named mapFrame.
How can I complete this?
I dont like to use <embed> tag in html because that IE always requests for
"activate the control". So,I use iFrame directly.
Any advice is appreciated,Thanks in advance.
Alex
HTML docuement(map.html)
<head>
<script>
function showLayer(layerid){
alert("hide layer from html");
mapFrame.hideLayer(layerid);
}
</script>
</head>
<body>
<div style="border:1px solid green;width:100px;height:600px;float:left;">
<input type=checkbox id="road_polyline" name="road_polyline"
value="road_polyline" onclick="showLayer('road_polyline')" checked>road
polyline<br>
<input type=checkbox id="road_polyline" name="road_polyline"
value="road_polyline" onchange="showLayer('road_polyline')" checked>road
polyline<br>
<input type=checkbox id="road_polyline" name="road_polyline"
value="road_polyline" onchange="showLayer('road_polyline')" checked>road
polyline<br>
</div>
<div style="border:1px solid green;width:800px;height:600px;floatLeft">
<iframe id="mapFrame" name="mapFrame" width="800" height="600" src="map.svg"
border="0" style="border:0;scroll:no"></iframe>
</div>
</body>
</html>
SVG document(map.svg)
<svg x="0" y="0" width="800" height="600"
xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";
xmlns:attrib="http://www.carto.net/attrib";
onload="init(evt);" style="fill:green">
<script type="text/ecmascript" xlink:href="helper.js"/>
<script type="text/ecmascript" xlink:href="handler.js"/>
<script type="text/ecmascript"><![CDATA[
var svgNS = "http://www.w3.org/2000/svg";;
var xlinkNS = "http://www.w3.org/1999/xlink";;
var mainMap;
function init(evt) {
mainMap = new map(...);
//blahblah
}
//top.hideLayer = hideLayer;
function hideLayer(layerid){
alert("hide layer from svg");
mainMap.hideLayer(layerid);
}
]]></script>
<defs>
</defs>
<title>SVG Map</title>
<svg id="mapID" viewBox="103.9 -30.755 0.275 0.146" style="fill:red"
width="800" height="600" x="0" y="0">
<!--all layers can be accessed-->
<g id="mapIDGroup">
<g id="road_polyline"/>
<g id="adm_area_region"/>
<g id="landuse_polyline"/>
<g id="landuse_region"/>
<g id="adm_landmark_point"/>
</g>
<!--client mark layer-->
<g id="markLayer"></g>
</svg>
</svg>
