Question

在html页面中svg更改过viewbox之后，如何计算偏移的坐标。

最好能加您的QQ详细说，谢谢谢谢

Answer 1

http://blog.csdn.net/qingcai20071141/article/details/6257184

//鼠标坐标：在SVG经过缩放、偏移、ViewBox转换后，鼠标坐标值
var mouseCoord = {
x : 0.,
y : 0.
};
//用户坐标：相对于原始SVG,坐标位置
var userCoord = {
x : 0.,
y : 0.
};
var cRadius = 4.; //半径

var svgDocument = null;
var svgRoot = null;

//获取鼠标事件相关的SVG Document
function getSVGDocument(evt)
{
var target = evt.target;
var parent = target.parentNode;
svgDocument = parent.getOwnerDocument();
svgRoot = svgDocument.documentElement;
}

//计算坐标位置:包括用户坐标、鼠标坐标
function getCoords(evt)
{
var x_trans = 0.; //X偏移
var y_trans = 0.; //Y偏移
var x_scale = 1.; //ViewBox导致的X缩放比例
var y_scale = 1.; //ViewBox导致的Y缩放比例
var scale = 1.; //缩放比例
var trans = null;
var viewbox = null;

getSVGDocument(evt);

scale = svgRoot.currentScale; //获取当前缩放比例
trans = svgRoot.currentTranslate; //获取当前偏移
//获取SVG的当前viewBox
viewbox = svgRoot.getAttributeNS(null, "viewBox"); //获取ViewBox属性

//获取用户坐标：原始SVG的坐标位置
userCoord.x = evt.getClientX();
userCoord.y = evt.getClientY();

//计算偏移、缩放等
x_trans = ( 0.0 - trans.x ) / scale;
y_trans = ( 0.0 - trans.y ) / scale;
// Now that we have moved the rectangle's corner to the
// upper-left position, let's scale the rectangle to fit
// the current view. X and Y scales are maintained seperately
// to handle possible anamorphic scaling from the viewBox
zoom = scale;
x_scale = 1.0 / scale;
y_scale = 1.0 / scale;
if ( viewbox ) {
// We have a viewBox so, update our translation and scale
// to take the viewBox into account
// Break the viewBox parameters into an array to make life easier
var params = viewbox.split(//s+/);
// Determine the scaling from the viewBox
// Note that these calculations assume that the outermost
// SVG element has height and width attributes set to 100%.
var h_scale = 1.0 / parseFloat(params[2]) * window.innerWidth;
var v_scale = 1.0 / parseFloat(params[3]) * window.innerHeight;
// Update our previously calculated transform
x_trans = x_trans / h_scale + parseFloat(params[0]);
y_trans = y_trans / v_scale + parseFloat(params[1]);
x_scale = x_scale / h_scale;
y_scale = y_scale / v_scale;
}
//根据用户坐标、偏移量、缩放等计算鼠标坐标
mouseCoord.x = userCoord.x * x_scale + x_trans;
mouseCoord.y = userCoord.y * y_scale + y_trans;