Closed
Bug 1213867
Opened 10 years ago
Closed 10 years ago
SVG getBoundingClientRect gives different results for indirect (defs/use) and direct using
Categories
(Core :: SVG, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: alexchem, Unassigned)
Details
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36
Steps to reproduce:
IceWeasel 38.3.0.
Debian Jessie. 64 bit.
Let's run such html file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<svg viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs id="Masters">
<symbol id="MY_ID">
<circle cx="150" cy="100" r="40" style="fill:#000"/>
</symbol>
</defs>
<use xlink:href="#MY_ID"/>
<!--<circle cx="150" cy="100" r="40" style="fill:#000"/>-->
</svg>
<script>
var el = $('svg').find('defs').next('use, circle').get(0);
alert(el.getBoundingClientRect().height);
</script>
</body>
</html>
Actual results:
When the code uses "use" element to print the circle, the "alert" outputs "850" (for my client area). Probably it is height for entire viewBox mapped on my client area.
When the code uses "circle" (comment the line with "use" and uncomment the line with "circle"), the "alert" outputs "170".
If I remove viewBox attribute, results for FireFox will be "150" and "80". For Chrome both results will be "80".
Expected results:
I expected that results will be the same (for "circle" and for "use"). Chrome shows "165" for both cases.
Component: Untriaged → Web Apps
OS: Unspecified → Linux
Hardware: Unspecified → x86_64
|
||
Updated•10 years ago
|
Component: Web Apps → SVG
Product: Firefox → Core
|
|
||
Comment 1•10 years ago
|
||
Per http://www.w3.org/TR/2003/REC-SVG11-20030114/struct.html#UseElement
when a use points to a symbol it looks like this...
<g>
<svg id="MY_ID" width="100%" height="100%">
<circle cx="150" cy="100" r="40" style="fill:#000"/>
</svg>
</g>
So the bounding box is basically that of the generated <svg> element which is 100% of the viewBox.
Therefore this is a bug in Chrome.
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Resolution: --- → INVALID
Thank you for clarification. The fresh one: http://www.w3.org/TR/SVG11/struct.html#UseElement also requires 100% for "symbol" without explicit widht/height.
But, there is no requirements to set width and height to 100% for "svg" in defs.
I replaced "symbol" by "svg" and got similar FireFox behaviour as for "symbol".
Only when I removed "symbol" and used such code, getBoundingClientRect gives usefull results:
<defs id="Masters">
<circle id="MY_ID" cx="150" cy="100" r="40" style="fill:#000"/>
</defs>
But spec section for "svg" and for "otherwise" diffs only in such sentence:
" If attributes ‘width’ and/or ‘height’ are provided on the ‘use’ element, then these values will override the corresponding attributes on the ‘svg’ in the generated tree."
So, I think there is a bug in FireFox with "svg" in defs.
Summary: SVG getBoundingClientRect gives different results for indirect (symbol/use) and direct using → SVG getBoundingClientRect gives different results for indirect (defs/use) and direct using
Though, the http://www.w3.org/TR/SVG11/struct.html#SVGElement for svg element says: "If the attribute is not specified, the effect is as if a value of '100%' were specified" for width and height attributes. So probably all my topic is false alarm. Sorry.
You need to log in
before you can comment on or make changes to this bug.
Description
•