Du kan teste her.
demo1.html
https://borres.hiof.no/wep/svg/norge/k1/demo1.html
, og inspisere kildekoden.
SVG-formatet er slik ( se modulen
Norge
)
<svg
version="1.2"
width="600px"
height="600px"
viewBox="600.15482 40.73736 1076.0438 2876.6739"
id="NO">
<g
id="01"
label="Østfold">
<path
label="Halden"
style="fill:#999999;fill-opacity:1;stroke:none"
id="0101"
d="m 800.69641,2717.5047 c -0.29632,-0.2395 -1.18938,-1.0938 -1.98449,-1.8986 ... z"
/>
...
</g>
....
</svg>
Javaskriptet som handterer det hele ser slik ut
// marking a kommune
var selected="fill:#990000;fill-opacity:1;stroke:none";
var unselected="fill:#999999;fill-opacity:1;stroke:none";
// the message elt
var msgElt;
var ms="top:TPpx;left:LFpx";
// seleted kommue
var target=null;
//--------------------
// walk the svg-document and plant click function
function setUp(){
var svg = document.getElementsByTagName("svg")[0];
var gs=svg.getElementsByTagName("g");
for(ix=0;ix < gs.length;ix++){
// locate path elements in this g-element
var paths=gs[ix].childNodes;
for(kix=0;kix < paths.length;kix++){
var nodename=paths[kix].nodeName;
if(nodename=="path")
paths[kix].setAttribute("onclick","kommune_click(evt)");
}
}
// and remember the message element
msgElt=document.getElementById("message");
}
//------------------
// handle the click
// and show kommune with id and name (label in path-element)
function kommune_click(evt) {
if(target)
target.style=unselected;
target=evt.target;
target.style=selected;
msgElt.innerHTML=target.getAttribute("id")+" : "+target.getAttribute("label");
}
![[1]](http://commons.wikimedia.org/wiki/File:Norway_municipalities_2012_blank.svg){kind=link}