Coordinates in Windows and viewBox
Formula: xm=evt.getClientX() and ym=evt.getClientY() give coordinates of
pointer in window with (0;0) as origin at left top vertice of SVG zone.
This values don't depend of values in viewBox, you have to make some calculus to
put object at mouse position by example.
Supposons que les paramètres sont les suivants:
W is width and H is height (in HTML file for embedded object or in SVG file if
it's alone called)
viewBox="x0 y0 lo la" (in SVG file)
Coordinates are x0+xm*lo/W and y0+ym*la/H .....
Source
<?xml version='1.0' encoding='iso-8859-1'?>
<svg width='400' height='400' viewBox="-200 -200 1800 1800"
onmousemove='souris(evt)'>
<script><![CDATA[
function souris(evt)
{xm=evt.getClientX();ym=evt.getClientY();
xs=evt.getScreenX();ys=evt.getScreenY();
xsvg=-200+xm*5;ysvg=-200+ym*5;
root=evt.getTarget().getOwnerDocument();
root.getElementById('pos').getFirstChild().setData('Coordonnées fenêtre SVG:
'+xm+' '+ym);
root.getElementById('pos2').getFirstChild().setData('Coordonnées fenêtre HTML:
'+xs+' '+ys);
root.getElementById('pos3').getFirstChild().setData('Coordonnées viewBox: '+xsvg+'
'+ysvg)}
]]></script>
<rect x='-200' y='-200' width='2000' height='2000' style='stroke-width:1;stroke:black;fill:yellow'/>
<text id='pos' x='-180' y='100' style='font-size:60'>Coordonnées fenêtre
SVG: </text>
<text id='pos2' x='-180' y='200' style='font-size:60'>Coordonnées
fenêtre HTML: </text>
<text id='pos3' x='-180' y='300' style='font-size:60'>Coordonnées viewBox:
</text>
<text x='-180' y='400' style='font-size:60'>ViewBox: -200 -200 1800
1800</text>
</svg>