Question

我有一个地图背景，绘制为SVG元素，宽度为2188像素，高度为1312像素。我想要在此区域内单击的x，y坐标，但事件clientX和clientY属性以及screenX和screenY属性似乎以不同方式缩放。在这两种情况下，宽度和长度都表示为较小的量（显然较大的测量单位）。

可以检索具有指定宽度和高度的SVG元素内的单击的x和y坐标吗？我也愿意为clientX / Y或screenX / Y使用乘数，但我不明白它们表示的是什么。

这是我的html文件：

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>RESA Graphics</title>
<meta http-equiv="refresh" content="5">
    <style>
        #svgContainer {
            width:  2188px;
            height: 1312px;
            background-color: "white";
        }
    </style>
<script type='text/javascript' src='fixed.js'></script>
<script type='text/javascript' src='var.js'></script>
</head>
<body onload="resagui()">
    <div id="svgContainer"></div>
</body>

这里是JavaScript，它定义了代表地图的SVG元素的属性：

function resagui() {
var xmlns = "http://www.w3.org/2000/svg";
var boxWidth = 2188;
var boxHeight = 1312;

var svgElem = document.createElementNS (xmlns, "svg");
svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight);
svgElem.setAttributeNS (null, "width", boxWidth);
svgElem.setAttributeNS (null, "height", boxHeight);
svgElem.setAttributeNS (null, "preserveAspectRatio", "xMidYMid meet");

var g = document.createElementNS (xmlns, "g");
svgElem.appendChild (g);
g.setAttributeNS (null, "transform", "translate(0.000000,1312.000000) scale(0.100000,-0.100000)");

...

最后发布的声明中的比例确实看起来很可疑，但差异似乎不是10的因素。

Answer 1

属性pageX和pageY给出了所需的结果。

想要在SVG元素内点击的x，y坐标

1 个答案: