Как опросить объект события snap svg, чтобы получить координату viewbox?

Question

У меня есть простой SVG-файл, содержащий 2 прямоугольника и текст:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="mySvg" onload="init()" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 1371.4286 773.5047">

<script xlink:href="snap.svg-min.js" type="text/ecmascript"/>
<rect id="blackRect" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" ry=".16344" height="773.5" width="1371.4" y="161.71" x="-371.43" fill="#ffb380"/>
<rect id="hoverTarget"   style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" ry=".098402" height="177.14" width="286.62" y="369.51" x="180" fill="#008080"/>

<text id="viewboxText" style="word-spacing:0px;letter-spacing:0px" font-weight="bold" xml:space="preserve" font-size="27.5px" line-height="125%" y="810.93359" x="-3.165039e-005" font-family="sans-serif" fill="#000000"><tspan id="tspan3348" x="-3.165039e-005" y="810.93359">Viewbox :</tspan></text>
</svg>

и до закрытия </svg> тег я добавил этот скрипт:

<script><![CDATA[
var mySvg, hoverTarget,  viewboxText;
function init(){
  mySvg=Snap("#mySvg");
  hoverTarget=mySvg.select("#hoverTarget"); 
  viewboxText=mySvg.select("#viewboxText");
  hoverTarget.mousemove(hoverCursor);
}

function hoverCursor(evt){
  var cursorX, cursorY;
  if(evt.type==="mousemove"){
    cursorX=...;
     /*this is my question : how to interrogate the evt object to get X position of the cursor 
    according to mySvg viewbox?*/
    cursorY=...;
    //and, of course, how to get Y position from the evt object..

    //and after that, display it on the text...
    viewboxText.attr({text : "X : " + cursorX + ", Y : " + cursorY});
  }
}
]]></script>

Мой вопрос: есть ли способ опросить объект события привязки функции-обработчика события, чтобы получить координату viewbox родительского элемента svg?

Если есть, какой синтаксис?

Answer 1

Это то, что я думаю, вы можете после...

Сначала мы получаем обратную матрицу от элемента к экрану

var m = Snap.matrix( evt.target.getScreenCTM().inverse() )

// you may want to use this instead, but should be same for this case
// var m = Snap.matrix( mySvg.node.getScreenCTM().inverse() )

var newX = m.x( cursorX, cursorY )
var newY = m.y( cursorX, cursorY )

mx(), my() преобразуют координаты x,y в новую матрицу.

jsfiddle