SVG図形の上のカーソル位置の座標及び図形の上にカーソルがある場合はその図形の色を赤に変更し座標を表示します。

カーソル位置
図形

座標の表示

　svg要素にaddEventListenerによりmousemoveイベントの関数を設定します。
　mousemoveイベントが発生した場合は、event.clientX,event.clientYにクライアント座標が格納されているので、createSVGPointとpt.matrixTransformによりSVG上の座標に変換します。
　取得された座標をidがCURXYのspan要素へtextContentによりhtml上に書き込みます。

カーソル位置の図形の色の変更と座標の表示

　getElementByIdによりPolylineとPolygonのオブジェクトのコレクションを取得します。
配列形式になっているので要素ごとにaddEventListenernによりmouseoverとmouseoutイベントに対応する関数を設定します。lengthによりオブジェクト数が取得できます。
　mouseover,mouseoutイベントが発生した場合、event.targetにより該当するオブジェクトを取得しpoints.getItem(n).x , points.getItem(n).yにより座標を取得します。座標の個数は、points.numberOfItemsで取得できます。
　取得された座標をidがSelObjのspan要素へtextContentによりhtml上に書き込みます。
　オブジェクトの色をsetAttributeによりmouseoverの場合赤、mouseoutの場合黒に変更します。

htmlコードの一部

<svg id="SrcSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill-rule="evenodd"
 height="520" preserveAspectRatio="none" stroke-linecap="round"
  viewBox="0 0 32000 26000"
   width="640">
<rect x="1000" y="1000" width="30000" height="24000" stroke="red" stroke-width="50" fill="none"/>

<g stroke-width="50" stroke="black" fill="none">
<polygon points="10993,19854 10989,19730 10975,19606 10952,19483 10919,19363 10878,19245 10828,19131 10770,19021 10704,18915 10630,18815 10549,18721 10460,18632 10366,18551 10266,18477 10160,18411 10050,18353 9936,18303 9818,18262 9698,18229 9575,18206 9452,18192 9327,18188 9203,18192 9079,18206 8956,18229 8836,18262 8718,18303 8604,18353 8494,18411 8388,18477 8288,18551 8194,18632 8106,18721 8024,18815 7950,18915 7884,19021 7826,19131 7776,19245 7735,19363 7702,19483 7679,19606 7665,19730 7661,19854 7665,19979 7679,20103 7702,20225 7735,20345 7776,20463 7826,20577 7884,20688 7950,20793 8024,20893 8106,20988 8194,21076 8288,21157 8388,21231 8494,21298 8604,21356 8718,21406 8836,21447 8956,21479 9079,21502 9203,21516 9327,21521 9452,21516 9575,21502 9698,21479 9818,21447 9936,21406 10050,21356 10160,21298 10266,21231 10366,21157 10460,21076 10549,20988 10630,20893 10704,20793 10770,20688 10828,20577 10878,20463 10919,20345 10952,20225 10975,20103 10989,19979 10993,19854"/>
<polygon points="25596,19854 25591,19730 25577,19606 25554,19483 25522,19363 25480,19245 25431,19131 25372,19021 25306,18915 25232,18815 25151,18721 25063,18632 24968,18551 24868,18477 24762,18411 24652,18353 24538,18303 24420,18262 24300,18229 24178,18206 24054,18192 23929,18188 23805,18192 23681,18206 23559,18229 23438,18262 23321,18303 23206,18353 23096,18411 22991,18477 22890,18551 22796,18632 22708,18721 22627,18815 22553,18915 22486,19021 22428,19131 22378,19245 22337,19363 22305,19483 22282,19606 22268,19730 22263,19854 22268,19979 22282,20103 22305,20225 22337,20345 22378,20463 22428,20577 22486,20688 22553,20793 22627,20893 22708,20988 22796,21076 22890,21157 22991,21231 23096,21298 23206,21356 23321,21406 23438,21447 23559,21479 23681,21502 23805,21516 23929,21521 24054,21516 24178,21502 24300,21479 24420,21447 24538,21406 24652,21356 24762,21298 24868,21231 24968,21157 25063,21076 25151,20988 25232,20893 25306,20793 25372,20688 25431,20577 25480,20463 25522,20345 25554,20225 25577,20103 25591,19979 25596,19854"/>
<polyline points="25774,19854 25770,19715 25757,19577 25736,19439 25707,19304 25669,19171 25624,19041 25571,18915 25510,18792 25442,18675 25367,18563 25286,18457 25198,18357 25105,18263 25005,18177 24901,18098 24793,18027 24680,17964 24564,17910 24445,17864 24323,17828 24199,17800 24074,17781 23948,17772 23822,17772 23696,17781 23571,17800 23447,17828 23325,17864 23206,17910 23090,17964 22977,18027 22869,18098 22765,18177 22666,18263 22572,18357 22484,18457 22403,18563 22328,18675 22260,18792 22199,18915 22146,19041 22101,19171 22063,19304 22034,19439 22013,19577 22001,19715 21996,19854"/>
</g>
</svg><br />

カーソル位置 <span id="CurXY"></span><br />
図形 <span id="SelObj"></span><br />

<script type="text/javascript">

function cur_move(){
  var s = document.getElementById('SrcSvg');
  var pt=s.createSVGPoint();
  var cx=event.clientX;
  var cy=event.clientY;
  pt.x=cx;
  pt.y=cy;
  var svgP=pt.matrixTransform(s.getScreenCTM().inverse())
  var str='ClientXY['+event.clientX+','+event.clientY+'] SVG['+svgP.x+","+svgP.y+']';
  var t = document.getElementById('CurXY');
  t.textContent=str;
}

function polyline_sel(){
  var poly=event.target;
  var t = document.getElementById('SelObj');
  var n;
  var str='POLYLINE ';
  for(n=0;n<poly.points.numberOfItems;n++){
    str=str+poly.points.getItem(n).x+','+poly.points.getItem(n).y+' ';
  }
  t.textContent=str;
  poly.setAttribute('stroke','red');
}

function polyline_nsel(){
  var poly=event.target;
  poly.setAttribute('stroke','black');
}

function polygon_sel(){
  var poly=event.target;
  var t = document.getElementById('SelObj');
  var n;
  var str='POLYGON ';
  for(n=0;n<poly.points.numberOfItems;n++){
    str=str+poly.points.getItem(n).x+','+poly.points.getItem(n).y+' ';
  }
  t.textContent=str;
  var c=poly.color;
  var w=(poly.getAttribute('stroke-width'));
}

function polygon_nsel(){
  var poly=event.target;
  poly.setAttribute('stroke','black');
}


window.onload = function(){
// ページ読み込み時に実行したい処理
  var svg = document.getElementById('SrcSvg');
  svg.addEventListener('mousemove', cur_move);
  var polys=svg.getElementsByTagName('polyline');
  var n;
  for(n=0;n<polys.length;n++){
  	polys[n].addEventListener('mouseover', polyline_sel);
  	polys[n].addEventListener('mouseout', polyline_nsel);
  }
  var polygons=svg.getElementsByTagName('polygon');
  for(n=0;n<polygons.length;n++){
  	polygons[n].addEventListener('mouseover', polygon_sel);
  	polygons[n].addEventListener('mouseout', polygon_nsel);
  }
}

</script>