SVG - 从窗口坐标到视图框坐标 [英] SVG - From Window coordinates to ViewBox coordinates

问题描述

基本上我有一个SecondSVG成一个FirstSVG到一个SVGMainSVG。每个SVG都有自己的ViewBox。这个页面可以通过另一个页面在屏幕上的任何地方加载。

所以，基本上我怎么能找到屏幕x的ViewBoxSecondSVG知道这个svg基本上可以加载基于任何地方的调用页面？
event.clientX为我自己提供了屏幕的x坐标。如果我不知道SecondSVG的ViewBox的坐标，那么我怎样才能找到SecondSVG的ViewBox中的x坐标？

我正在使用Firefox 3.6.3我有一个事件对象，我可以从中提取clientX，clientY和其他相对于屏幕的坐标。但是我需要的是ViewBox中的坐标。

解决方案

 函数click（evt）
 {
 
 var root = document.getElementById（'svg'）; 
 
 var uupos = root.createSVGPoint（）; 
 
 uupos.x = evt.pageX; 
 
 uupos.y = evt.pageY; 
 
 var ctm = evt.target.getScreenCTM（）; 
 
 if（ctm = ctm.inverse（））
 
 uupos = uupos.matrixTransform（ctm）; 
 
 
 
 ///新的xy是：uupos.x，uupos.y 
} 
  

Basically I have an svg "SecondSVG" into an svg "FirstSVG" into an svg "MainSVG".Every svg has its own ViewBox. This page can be loaded anywhere on the screen by another page.
So basically how can i find the screen x for viewBox for"SecondSVG" knowing that this svg can be loaded basically anywhere based on the calling page? event.clientX gives myself the x coordinate for the screen. If I don't know the coordinate for ViewBox of "SecondSVG" then how can I find out the x coordinate inside the ViewBox of "SecondSVG"?

I am using Firefox 3.6.3 and I do have an event object from which I can extract clientX, clientY and other coordinates that are relative to the screen. However what I need are the coordinates inside the ViewBox.

解决方案

function click(evt)
{

var root = document.getElementById('your svg');

        var uupos = root.createSVGPoint();

        uupos.x = evt.pageX;

        uupos.y = evt.pageY;

        var ctm = evt.target.getScreenCTM();

        if (ctm = ctm.inverse())

            uupos = uupos.matrixTransform(ctm);



 ///the new x y are : uupos.x , uupos.y 
}

这篇关于SVG - 从窗口坐标到视图框坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！