1065023 - getBoundingClientRect() is 8px larger due to stroke-width with svg:polygon

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[Andre Schmidt]

Attachment: test-brect.html

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36

Steps to reproduce:

so i'm doing a flowchart with svg and javascript, where i need to draw lines from "block" to "block". and for that it seems i need getBoundingClientRect() to calculate the "blocks" position in the svg document. testing it in firefox i saw that the lines were placed oddly and could track it down on getBoundingClientRect() not giving same values as chromium.

tested with firefox 32.0 and firefox-nightly 35.0a1.20140909

attached test-brect.html should draw two svg "blocks" with black outline, and two rectangles with red outline visualizing the boundary box calculated for those "blocks".


Actual results:

http://osku.de/post/test-brect.png shows how firefox and chromium renders it. i'm not sure if firefox does it wrong - definetily odd -, or if i'm doing it wrong, but chromium renders it as i need it.


Expected results:

http://osku.de/post/test-brect.png as rendered by chromium

Comment 1

[Robert Longson [:longsonr]]

The subtraction seems wrong. I.e. I'd expect it to be

	rect.setAttribute('x', brect.left);
	rect.setAttribute('y', brect.top);

but then that only works when the margin is 0 i.e. with

<style>
* {
margin:0;
}
</style>

Comment 2

[Nickolay_Ponomarev]

I see the problem with the second <polygon id="bar" points="10,0 30,0 20,20 0,20"/> only - getBoundingClientRect() thinks it's 38x28 when getBBox() says it's 30x20.

This is due to stroke-width here:
<svg id="svg" style="fill:none;stroke:#000;stroke-width:1px">

As you decrease its value (e.g. 0.1px), the bounding rect becomes closer to 30x20.

I'm not sure if this is correct or a bug. See also bug 654145 comment 4.

Comment 3

[Robert Longson [:longsonr]]

No, that's not a bug. We asked for the spec to change: http://lists.w3.org/Archives/Public/www-style/2011Aug/0120.html