I am in the process of creating a resource map using SVGs. My goal is to display a popover in the center of the element when a user clicks on it. However, due to CSS rotation of the map, the traditional techniques such as the one mentioned here have not been successful.
Below is the javascript code I am using:
Map.popup = function(e) {
var rect = $(this);
var offset = $(this).offset();
var rectWidth = $(this).attr('width').replace(/[^-\d\.]/g, '');
var rectHeight = $(this).attr('height').replace(/[^-\d\.]/g, '');
var centerX = offset.left - rectWidth/2;
var centerY = offset.top - rectHeight/2;
$('.popup').css({
'top' : centerY,
'left' : centerX,
});
}
Here is the markup:
<div id="map">
<svg width="1088px" height="1088px" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(288.0 32.0) rotate(45 256.0 512.0)">
<!-- Add your rects here -->
</g>
</svg>
</div>
You can view the map and its positioning issue here.
If you have any suggestions on more accurate targeting of the center of each element, I would greatly appreciate it.