We Keep Coding

SVG <text> element bounding box changes on transform

As I understand it, getBBox() is supposed to ignore the transformations applied to the element it's measuring.
eg: if I have: <g transform="scale(0.5, 0.5)"><rect width="100" height="100" /></g>, calling getBBox on <g> will always return width: 100, height: 100, no matter what the scale() args are. However, this does NOT appear to be the case when using a <text> element instead of <rect>. The size of <text> reported by getBBox() changes as the transformation changes.
Full example:
const gNode = document.querySelector("g");
const dimensionsBB = () => {
console.log(gNode.getBBox());
}
// trigger every time a change in size is detected
const resizeObserver = new ResizeObserver(dimensionsBB);
resizeObserver.observe(gNode);
// update transformation every second
setInterval(() => {
gNode.setAttribute("transform", `scale(${Math.random()}, ${Math.random()})`);
}, 1000);
<svg width="500" height="500">
<g>
<text>Text goes here</text>
</g>
</svg>
In this example, the resizeObserver is triggered each time the scale changes, and the dimensions reported by getBBox() are different each time (with slight variations).
Why? And is there a way to always get a consistent result?

when hover over svg map display a popup with details

I have designed a map on AI (adobe Illustrator) with sections and areas and exported the final map as SVG file to display on html page. Also I have the details for these sections in a separate excel sheet, I want when mouseover any section it will make a popup with the details for that section.
I need your advice on how to accomplish that.
Any help is appreciated,

The data should be converted to json or a javascript object like this:
var xlsData = {
"RedRect": "This is the Red Rectangle!",
"Star": "This is the Star Shape!"
}
The best way is to use the javascript event load on a svg object to attach the mouse events. Because jQuery prevents to bind load events to object elements, we have to use javascript addEventListener to setup the load event.
How to listen to a load event of an object with a SVG image?
Inside the SVG file, we have two objects with the ids RedRect and Star:
<rect id="RedRect" x="118" y="131" class="st0" width="153" height="116"/>
<polygon id="Star" class="st2" points="397,252.3 366.9,245.4 344.2,266.3 341.5,235.6 314.6,220.4 343,208.3 349.1,178.1
369.4,201.4 400,197.8 384.2,224.3 "/>
Now, all we have to do is attach our events when the svg objects loads:
<object id="svg" type="image/svg+xml" data="test-links.svg">Your browser does not support SVG</object>
$('object')[0].addEventListener('load', function() {
$('#RedRect', this.contentDocument).on({
'mouseenter': function() {
$('#hover-status').text('#svg #RedRect Mouse Enter');
$('#hover-data').text(xlsData['RedRect']);
},
'mouseleave': function() {
$('#hover-status').text('#svg #RedRect Mouse Leave');
$('#hover-data').html(' ');
}
});
$('#Star', this.contentDocument).on({
'mouseenter': function() {
$('#hover-status').text('#svg #Star Mouse Enter');
$('#hover-data').text(xlsData['Star']);
},
'mouseleave': function() {
$('#hover-status').text('#svg #Star Mouse Leave');
$('#hover-data').html(' ');
}
});
}, true);
Plunker example

Setting D3 svg.transition to go from slow to fast to slow

I have a D3 graph that allows a user to click a button to take them to a specified node. The button looks like this:
<button type="button" class="btn btn-primary" ng-click="ctrl.panGraph(9)">Go to End</button>
This button will take the user from wherever they are in the svg at the time of click, to the x and y coordinates of the last node, with the id of 9. On click this function is called:
function panGraph (nodeId:any) {
svgWidth = parseInt(svg.style("width").replace(/px/, ""), 10);
svgHeight = parseInt(svg.style("height").replace(/px/, ""), 10);
for (var i = 0; i < renderedNodes.length; i++) {
if (nodeID === renderedNodes[i].id) {
ctrl.selectedNode = renderedNodes[i];
var translate = [svgWidth / 2 - renderedNodes[i].x, svgHeight / 2 - renderedNodes[i].y];
var scale = 1;
svg.transition().duration(4000).ease(d3.easeExpInOut).call(zoom.translate(translate).scale(scale).event);
}
}
}
In the above function I have all the rendered nodes that have been rendered on the page, once I find the matching id I use its x and y coordinates to center the specified node in the middle of the svg. That all works fine.
I am trying to use some animations during the time that the graph is translating to the specified node on button click. When the user clicks the button that takes him or her to the specified node, is it possible to animate the transition so that the transition initially starts slow, then speeds up, but then slows down again at the end as it gets close to the specified node? Thanks
UPDATE:
The above code with the "ease" incluided gives me this console error:
angular.js:13550 TypeError: Cannot read property 'indexOf' of undefined
at Object.d3.ease (d3.js:5844)
at Array.d3_transitionPrototype.ease (d3.js:8838)
at zoomOnNode (DiagramComponent.ts:1128)
at DiagramComponent.ts:1072
at Scope.$digest (angular.js:17073)
at Scope.$apply (angular.js:17337)
at HTMLButtonElement.<anonymous> (angular.js:25023)
at HTMLButtonElement.dispatch (jquery.js:4737)
at HTMLButtonElement.elemData.handle (jquery.js:4549)

Here is the v3 equivalent to Gerardo's post regarding v4:
svg.transition().duration(1000).ease("exp-in-out").call(zoom.translate(translate).scale(scale).event);
For a list of all the easing equivalents from v3 to v4 and other changes:
https://github.com/d3/d3/blob/master/CHANGES.md

One (out of several) solution is to use ease with d3.easeExpInOut, or d3.easePolyInOut.exponent(x) with a high exponent (like x=4 or x=5).
See this snippet. Click the circle to see it moving from left to right, starting slow, speeding up and then slowing down again:
d3.select("circle").on("click", function(){
d3.select(this).transition()
.duration(4000)
.ease(d3.easeExpInOut)
.attr("cx", 360)
});
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="400" height="200">
<circle cx="40" cy="100" r="30" fill="teal"></circle>
<line x1="40" x2="40" y1="100" y2="150" stroke="black" stroke-width="1"></line>
<line x1="360" x2="360" y1="100" y2="150" stroke="black" stroke-width="1"></line>
</svg>

mousemove offset X/Y wrong in Chrome when used on a SVG text element

http://jsfiddle.net/g0bq6af6/2/
SVG
<svg height="750" version="1.1" width="830" xmlns="http://www.w3.org/2000/svg" viewBox="925 890 1363 1192">
<g>
<text x="975" y="1795" style="font-size: 816px;">foo</text>
</g>
</svg>
Javascript:
x = document.getElementById('coords');
document.getElementsByTagName('svg')[0].addEventListener('mousemove', function(a) {
x.innerHTML = (a.offsetX === undefined) ? (a.layerX + ' ' + a.layerY) : (a.offsetX + ' ' + a.offsetY);
});
I bind mousemove on <svg> and print the offsetX and offsetY. When the mouse is on <text> the coordinates are way wrong, ie -755, -925 instead of the expected 215, 114.
layerX and layerY are correct however.
This problem is in Chrome. Opera gives the correct result. IE is still untested. Firefox does not have offset X/Y and gives a correct result through layer X/Y.
Can anyone please explain this?
I have tried using jQuery to achieve it's normalizing effect but the result is same.
UPDATE
I updated the JSFiddle and added a <circle> to demonstrate that this behaviour is for the <text> element only.
View it here: http://jsfiddle.net/g0bq6af6/3/

How can I map click events to elements in multiple layers?

I have multiple SVG elements that are in separate groups. They overlap each other. Example:
<svg id="board" width="100%" height="80%">
<g id="terrain" class="layer">
<path d="M-32,-32L32,-32 32,32 -32,32Z" transform="translate(0, 0)" class="mote terrain hill"></path>
</g>
<g id="guy" class="layer">
<path d="M-21...Z" transform="translate(192, 448)" class="mote guy"></path>
</g>
</svg>
When an x, y position that matches both is clicked, I want to know all that both were clicked. If I bind each to the 'click' event, only the event handlers for one on top gets called. Which is reasonable, although not what I want here.
I'm thinking of creating a topmost layer and having that catch all clicks, then figure out which elements in the other layers should be notified. That's a lot of tracking that I'd like to avoid, if possible. Are there simpler approaches to this?

From The SVG spec
"By default, pointer-events must not be dispatched on the clipped (non-visible) regions of a shape. For example, a circle with a radius of 10 which is clipped to a circle with a radius of 5 will not receive 'click' events outside the smaller radius. Later versions of SVG may define new properties to enable fine-grained control over the interactions between hit testing and clipping."
However, there is a way of getting a list of svg shapes that intersect at a particular point. The "getIntersectionList" function returns a list of items.
I've created one of those jsfiddle things jsfiddle.net/uKVVg/1/ Click on the intersection of the circles to get a list of ID's. Manually send events to that list.
Javascript follows:
function s$(a) {
return document.getElementById(a);
}
var list
function hoverElement(evt) {
var root = s$("canvas");
var disp = s$("pointer");
disp.setAttribute("x",evt.clientX);
disp.setAttribute("y",evt.clientY);
rpos = root.createSVGRect();
rpos.x = evt.clientX;
rpos.y = evt.clientY;
rpos.width = rpos.height = 1;
list = root.getIntersectionList(rpos, null);
s = "clicked: "
$.each(list,function(item,val){
if (val.id != "pointer") {
s = s + (val.id) + " ";
}
})
alert(s);
}
var root = s$("canvas");
root.addEventListener("click", hoverElement, false);
There's some javascript that could probably be tidied up, but hopefully it answers your question.