有没有办法从 svg 元素获取屏幕/窗口坐标？我已经看到了相反的解决方案，例如：
function transformPoint(screenX, screenY) {
var p = this.node.createSVGPoint()
p.x = screenX
p.y = screenY
return p.matrixTransform(this.node.getScreenCTM().inverse())
}
但在我的情况下我需要的是屏幕坐标。
抱歉，如果这是一个明显的问题，但我是 svg 的新手。谢谢。
Pau*_*eau 14
您在问题中包含的代码将屏幕坐标转换为 SVG 坐标。反过来，你必须做与该功能相反的事情。
getScreenCTM()返回转换坐标所需的矩阵。请注意，代码调用inverse()? 这是反转矩阵，因此它在另一个方向进行转换。
因此，您需要做的就是inverse()从该代码中删除调用。
var svg = document.getElementById("mysvg");
function screenToSVG(screenX, screenY) {
var p = svg.createSVGPoint()
p.x = screenX
p.y = screenY
return p.matrixTransform(svg.getScreenCTM().inverse());
}
function SVGToScreen(svgX, svgY) {
var p = svg.createSVGPoint()
p.x = svgX
p.y = svgY
return p.matrixTransform(svg.getScreenCTM());
}
var pt = screenToSVG(20, 30);
console.log("screenToSVG: ", pt);
var pt = SVGToScreen(pt.x, pt.y);
console.log("SVGToScreen: ", pt);<svg id="mysvg" viewBox="42 100 36 40" width="100%">
</svg>当我想做同样的事情时（了解哪些屏幕坐标对应于 SVG 坐标），我正在玩下面的这个片段。我认为简而言之，这就是您所需要的：
学习当前SVG元素的变换矩阵（你感兴趣的坐标），大致：matrix = element.getCTM();
然后通过执行大致获得屏幕位置：position = point.matrixTransform(matrix)，其中“point”是一个SVGPoint。
请参阅下面的片段。我通过更改浏览器窗口大小来玩这个，并正在改变 svg 坐标以匹配 div 元素的坐标
// main SVG:
var rootSVG = document.getElementById("rootSVG");
// SVG element (group with rectangle inside):
var rect = document.getElementById("rect");
// SVGPoint that we create to use transformation methods:
var point = rootSVG.createSVGPoint();
// declare vars we will use below:
var matrix, position;
// this method is called by rootSVG after load:
function init() {
// first we learn current transform matrix (CTM) of the element' whose screen (not SVG) coordinates we want to learn:
matrix = rect.getCTM();
// then we "load" SVG coordinates in question into SVGPoint here:
point.x = 100; // replace this with the x co-ordinate of the path segment
point.y = 300; // replace this with the y co-ordinate of the path segment
// now position var will contain screen coordinates:
position = point.matrixTransform(matrix);
console.log(position)
// to validate that the coordinates are correct - take these x,y screen coordinates and apply to CSS #htmlRect to change left, top pixel position. You will see that the HTML div element will get placed into the top left corner of the current svg element position.
}html, body {
margin: 0;
padding: 0;
border: 0;
overflow:hidden;
background-color: #fff;
}
svg {
position: fixed;
top:0%;
left:0%;
width:100%;
height:100%;
background:#fff;
}
#htmlRect {
width: 10px;
height: 10px;
background: green;
position: fixed;
left: 44px;
top: 132px;
}<body>
<svg id="rootSVG" width="100%" height="100%" viewbox="0 0 480 800" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init()">
<g id="rect">
<rect id="rectangle" x="100" y="300" width="400" height="150"/>
</g>
</svg>
<div id="htmlRect"></div>
</body>| 归档时间： |
|
| 查看次数： |
9659 次 |
| 最近记录： |