You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-users@xmlgraphics.apache.org by Alex Chew <ch...@gmail.com> on 2006/11/23 04:58:09 UTC
How can i call a javascript method in svg document from html?
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>
Re: How can i call a javascript method in svg document from html?
Posted by Pieter Jansen <pj...@gmail.com>.
On 11/23/06, Alex Chew <ch...@gmail.com> wrote:
> I am not sure the subject can explain my question.
http://www.nabble.com/How-to-call-JavaScript-in-SVG-from-JavaScript-in-HTML-t2339406.html
and:
http://www.amarasoftware.com/flash-js-content.htm
Pitr
--
http://pitr.net
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org