如何询问 snap svg 事件对象以获得视图框坐标？

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>

我的问题是：有没有办法查询事件处理函数的 snap 事件对象以获得 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 )

m.x(), m.y() 用新矩阵转换 x,y 坐标。

jsfiddle

如何询问 snap svg 事件对象以获得视图框坐标？

How to interrogate snap svg event object to get viewbox coordinate?

javascript

svg

snap.svg