SVG坐标

发布于 2024-11-05 10:48:50 字数 2407 浏览 0 评论 0原文

sample output:
offset based on svg x:12 y:34
mouse click based on screen x:22 y:38
mouse coord based on svg x:10 y:4

当我单击左上角的矩形时，会生成上述示例输出角落。

据我了解， getScreenCTM 接口提供了元素的转换矩阵（此处为 svg ）。我把它作为第一行。第二行表示基于屏幕坐标的鼠标坐标。当我将变换矩阵应用于鼠标单击时，我希望该点将转换为 svg 坐标。该值是上面的第 3 行。我不确定它是否正确。该矩形的y坐标为10，点击事件仅在该矩形内有效。那么基于 svg 的鼠标坐标怎么会低于 10 呢？

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> 
</head>
<body>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<h1>sdsd</h1>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" height="200">
    <g fill="none" stroke="black" stroke-width="1" >
        <!-- Draw the axes of the original coordinate system -->
        <line x1="0" y1=".5" x2="400" y2=".5" />
        <line x1=".5" y1="0" x2=".5" y2="150" />
    </g>

    <g >
        <rect class="drag resize" x="10" y="10" width="100" height="50" fill="#c66" />
    </g>
</svg>

    <h2 id="op"></h2> 

          <script type="text/javascript" src="vb.js"></script>
</body>
</html>

var svg   = document.getElementsByTagName('svg')[0];
var svgNS = svg.getAttribute('xmlns');
var pt    = svg.createSVGPoint();
var el1 = document.getElementsByTagName('rect')[0];

var log_svgcursorPoint,
    log_mouseclick,
    log_mousecoord;


function svgcursorPoint(evt){
    pt.x = evt.clientX; pt.y = evt.clientY;
    var a = svg.getScreenCTM();
    log_svgcursorPoint = "offset based on svg"+ " x:" + a.e +" y:" + a.f;
    var b = a.inverse();
    return pt.matrixTransform(b);
};

    (function(el){
        el.addEventListener('mousedown',function(e){
            log_mouseclick = "mouse click based on screen"+ " x:" + e.clientX +" y:" + e.clientY ;
            var svgmouse   = svgcursorPoint(e);    
            log_mousecoord = "mouse coord based on svg"+ " x:" + svgmouse.x +" y:" +svgmouse.y;
            document.getElementById('op').innerHTML = log_svgcursorPoint + "<br>" + log_mouseclick + "<br>" + log_mousecoord;
        },false);
    })(el1);

原文

Please see the jsfiddle

sample output:
offset based on svg x:12 y:34
mouse click based on screen x:22 y:38
mouse coord based on svg x:10 y:4

The above sample output is generated when I click on the rectangle on the top-left corner.

As far as I understood, getScreenCTM interface provides the transformation matrix for the element (svg here). I got it as the first line. Second line indicate the mouse coordinate based on the screen coordinate. When I apply the transformation matrix to the mouse click, I expect the point will be translated to svg coordinate. That value is the 3 rd line above. I am not sure that it is correct. The rectangle has a y coordinate 10, and the click event is only availbake within the rectangle. So how could the mouse coord based on svg go below 10??

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> 
</head>
<body>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<h1>sdsd</h1>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" height="200">
    <g fill="none" stroke="black" stroke-width="1" >
        <!-- Draw the axes of the original coordinate system -->
        <line x1="0" y1=".5" x2="400" y2=".5" />
        <line x1=".5" y1="0" x2=".5" y2="150" />
    </g>

    <g >
        <rect class="drag resize" x="10" y="10" width="100" height="50" fill="#c66" />
    </g>
</svg>

    <h2 id="op"></h2> 

          <script type="text/javascript" src="vb.js"></script>
</body>
</html>

var svg   = document.getElementsByTagName('svg')[0];
var svgNS = svg.getAttribute('xmlns');
var pt    = svg.createSVGPoint();
var el1 = document.getElementsByTagName('rect')[0];

var log_svgcursorPoint,
    log_mouseclick,
    log_mousecoord;


function svgcursorPoint(evt){
    pt.x = evt.clientX; pt.y = evt.clientY;
    var a = svg.getScreenCTM();
    log_svgcursorPoint = "offset based on svg"+ " x:" + a.e +" y:" + a.f;
    var b = a.inverse();
    return pt.matrixTransform(b);
};

    (function(el){
        el.addEventListener('mousedown',function(e){
            log_mouseclick = "mouse click based on screen"+ " x:" + e.clientX +" y:" + e.clientY ;
            var svgmouse   = svgcursorPoint(e);    
            log_mousecoord = "mouse coord based on svg"+ " x:" + svgmouse.x +" y:" +svgmouse.y;
            document.getElementById('op').innerHTML = log_svgcursorPoint + "<br>" + log_mouseclick + "<br>" + log_mousecoord;
        },false);
    })(el1);

分享到QQ

分享到微博