[lnkForumImage]
TotalShareware - Download Free Software
Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

need x,y coordinates of click inside SVG element

Jay Braun

8/26/2015 8:39:00 PM

I have a map background, drawn as an SVG element with a width of 2188 pixels and a height of 1312 pixels. I want the x,y coordinates of a click within this area, but the event clientX and clientY attributes, as well as the screenX and screenY attributes, seem to be scaled differently. In both cases, the width and length are expressed as smaller quantities (apparently larger measurement units).

Can one retrieve the x and y coordinates of a click inside an SVG element that has a specified width and height? I would also be willing to use a multiplier for clientX/Y or screenX/Y, but I do not understand what they denote.

Here is my html file:

<!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>

and here is JavaScript that defines attributes of the SVG element representing the map:

function resagui() {
var xmlns = "http://www.w3.org/2000/...
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)");
....

The scale in the last posted statement does seem fishy, but the difference does not seem to be a factor of 10.
1 Answer

Jay Braun

8/26/2015 10:10:00 PM

0

Just found out about pageX and pageY, which is what I needed.

Thanks to whomever was going to reply.