Coordonnées fenêtre et viewBox
Formules: xm=evt.getClientX() et ym=evt.getClientY() renvoient les
coordonnées du pointeur dans la fenêtre, l'origine (0;0) étant l'angle
supérieur gauche de la zone SVG.
Ces données ne dépendent pas des valeurs données dans viewBox, elles ne
peuvent être utilisées telles quelles pour placer un objet ou autre action.
Supposons que les paramètres sont les suivants:
W pour width et H pour height (dans le fichier HTML ou dans le fichier SVG s'il
est appelé seul)
viewBox="x0 y0 lo la" (dans le fichier SVG)
Les coordonnées SVG seront alors x0+xm*lo/W et y0+ym*la/H .....
Source du fichier SVG
<?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>