|
1 /* |
|
2 * Copyright (c) 2009 Nokia Corporation and/or its subsidiary(-ies). |
|
3 * All rights reserved. |
|
4 * This component and the accompanying materials are made available |
|
5 * under the terms of "Eclipse Public License v1.0" |
|
6 * which accompanies this distribution, and is available |
|
7 * at the URL "http://www.eclipse.org/legal/epl-v10.html". |
|
8 * |
|
9 * Initial Contributors: |
|
10 * Nokia Corporation - initial contribution. |
|
11 * |
|
12 * Contributors: |
|
13 * |
|
14 * Description: |
|
15 * |
|
16 */ |
|
17 package org.w3c.dom.svg; |
|
18 |
|
19 |
|
20 /** |
|
21 * This interface represents an SVGLocatableElement. It is implemented by all drawable SVG elements |
|
22 * in the document tree. Drawable elements are: <rect>, <circle>, <ellipse>, |
|
23 * <line>, <path> <use> <image> <text>, <svg>, <a>, |
|
24 * and <g>. <b>Note</b> that animations will have an effect on the values of bounding box. |
|
25 * |
|
26 * <br> |
|
27 * <br> |
|
28 * <br> |
|
29 *The following example further clarify the behavior of the getBBox() |
|
30 *method. The example have a short explanation, an SVG fragment and are |
|
31 *followed by a set of bounding box values which have the following |
|
32 *format:<br> |
|
33 *<tt><br> |
|
34 *[elementId] : {x, y, width, height} | {null}</tt><br> |
|
35 *<br> |
|
36 *where x, y, width and height define the values of the SVGRect object's |
|
37 *returned from a getBBox call on the element with the specified id. |
|
38 *There are a few cases where the bounding box may be null (see example |
|
39 *6).<br> |
|
40 *<br> |
|
41 *<h3>Example #1: Simple groups and bounds</h3> |
|
42 *<br> |
|
43 *This first example shows the values returned by the getBBox method for |
|
44 *various simple basic shapes and groups. In particular, it shows that |
|
45 *the transform, on an element, does not change the value of its user |
|
46 *space bounding box.<br> |
|
47 *<br> |
|
48 *<tt><g id="group1" transform="translate(10, 20)" fill="red" > |
|
49 *<br> |
|
50 * <rect id="rect1" transform="scale(2)" x="10" y="10" width="50" |
|
51 *height="50"/> |
|
52 *<br> |
|
53 * <rect id="rect2" x="10" y="10" width="100" height="100"/> |
|
54 *<br> |
|
55 * <g id="group2" transform="translate(10, 20)" > |
|
56 *<br> |
|
57 * <rect id="rect3" x="0" y="10" width="150" height="50"/> |
|
58 *<br> |
|
59 * <circle id="circle1" cx="20" cy="20" r="100" /> |
|
60 *<br> |
|
61 * </g> |
|
62 *<br> |
|
63 *</g> |
|
64 *<br> |
|
65 *</tt><br> |
|
66 *<tt>[group1] : {-70.0, -60.0, 230.0, 200.0} |
|
67 *<br> |
|
68 *[rect1] : {10.0, 10.0, 50.0, 50.0} |
|
69 *<br> |
|
70 *[rect2] : {10.0, 10.0, 100.0, 100.0} |
|
71 *<br> |
|
72 *[group2] : {-80.0, -80.0, 230.0, 200.0} |
|
73 *<br> |
|
74 *[rect3] : {0.0, 10.0, 150.0, 50.0} |
|
75 *<br> |
|
76 *[circle1] : {-80.0, -80.0, 200.0, 200.0} |
|
77 *</tt><br> |
|
78 *<br> |
|
79 *<h3>Example #2: Bounding box on zero width or height rectangle<br> |
|
80 *</h3> |
|
81 *This example illustrates that the bounding box on elements is based on |
|
82 *the element's geometry coordinates. For example, the bounding box on a |
|
83 *zero-width rectangle is defined (see below), even though the rectangle |
|
84 *is not rendered.<br> |
|
85 *<pre><tt><g id="group1" transform="translate(10, 20)" fill="red" ></tt></pre> |
|
86 *<pre><tt> </tt><rect id="rect2" x="10" y="10" width="400" height="0"/></pre> |
|
87 *<pre wrap=""><tt> <g id="group2" transform="translate(10, 20)" > |
|
88 * <rect id="rect3" x="0" y="10" width="150" height="50"/> |
|
89 * </g></tt><tt> |
|
90 *</g> |
|
91 *</tt></pre> |
|
92 *<pre><tt>[group1] : {10.0, 10.0, 400.0, 70.0} |
|
93 *</tt>[rect2] : {10.0, 10.0, 400.0, 0.0}<tt> |
|
94 *</tt>[group2] : {0.0, 10.0, 150.0, 50.0}<tt> |
|
95 *[rect3] : {0.0, 10.0, 150.0, 50.0}</tt> |
|
96 *</pre> |
|
97 *<h3>Example #3: Bounding Box on zero radius ellipses.</h3> |
|
98 *This is another example of how bounding boxes are based on the |
|
99 *element's geometry. Here, the bounding box of an ellipse with a zero |
|
100 *x-axis radius is still defined, even though the ellipse is not rendered.<br> |
|
101 *<pre wrap=""><svg id="mySVG" width="10" height="20"> |
|
102 *<g id="group1" transform="translate(10, 20)" fill="red" > |
|
103 * <rect id="rect1" x="10" y="10" width="100" height="100"/> |
|
104 * <ellipse id="ellipse1" cx="20" cy="20" rx="0" ry="70" /> |
|
105 *</g></pre> |
|
106 *<tt>[mySVG] : {20.0, -30.0, 100.0, 160.0} |
|
107 *<br> |
|
108 *[group1] : {10.0, -50.0, 100.0, 160.0} |
|
109 *<br> |
|
110 *[rect1] : {10.0, 10.0, 100.0, 100.0} |
|
111 *<br> |
|
112 *[ellipse1] : {20.0, -50.0, 0.0, 140.0} |
|
113 *</tt><br> |
|
114 *<h3>Example #4: Viewports do not clip bounding boxes</h3> |
|
115 *This example shows that no matter what the viewport is on the root SVG |
|
116 *element, the bounding boxes, based on the geometry, are still defined. |
|
117 *Here, even though the root svg has a zero width, the bounding boxes for |
|
118 *the root itself and its children is precisely defined.<br> |
|
119 *<pre wrap=""><svg id="mySVG" width="0" height="50"> |
|
120 * <g id="group1" transform="translate(10, 20)" fill="red" > |
|
121 * <rect id="rect1" x="10" y="10" width="50" height="50"/> |
|
122 * <g id="group2" transform="translate(10, 20)" > |
|
123 * <rect id="rect2" x="0" y="10" width="150" height="0"/> |
|
124 * <circle id="circle1" cx="20" cy="20" r="500" /> |
|
125 * </g> |
|
126 * </g> |
|
127 *</svg> |
|
128 *</pre> |
|
129 *<tt>[mySVG] : {-460.0, -440.0, 1000.0, 1000.0} |
|
130 *<br> |
|
131 *[group1] : {-470.0, -460.0, 1000.0, 1000.0} |
|
132 *<br> |
|
133 *[rect1] : {10.0, 10.0, 50.0, 50.0} |
|
134 *<br> |
|
135 *[group2] : {-480.0, -480.0, 1000.0, 1000.0} |
|
136 *<br> |
|
137 *[rect2] : {0.0, 10.0, 150.0, 0.0} |
|
138 *<br> |
|
139 *[circle1] : {-480.0, -480.0, 1000.0, 1000.0} |
|
140 *</tt><br> |
|
141 *<h3>Example #5: getBBox on <use></h3> |
|
142 *This example shows that the bounding box for a <use> element |
|
143 *accounts for the x and y attributes defined on the element, just like |
|
144 *the x and y attributes impact the bounding box computation on a |
|
145 *<rect> or on an <image> element.<br> |
|
146 *<br> |
|
147 *<tt><svg> |
|
148 *<br> |
|
149 * <defs> |
|
150 *<br> |
|
151 * <rect id="myRect" x="0" y="0" width="60" height="40" /> |
|
152 *<br> |
|
153 * </defs> |
|
154 *<br> |
|
155 * <use id="myUse" xlink:href="#myRect" x="-30" y="-20" /> |
|
156 *<br> |
|
157 *</svg> |
|
158 *<br> |
|
159 *</tt> |
|
160 *<br> |
|
161 *<tt>[myRect] : {0.0, 0.0, 60.0, 40.0} |
|
162 *<br> |
|
163 *[myUse] : {-30.0, -20.0, 60.0, 40.0} |
|
164 *</tt><br> |
|
165 *<h3>Example #6: Empty group</h3> |
|
166 *This example shows that the bounding box for an empty group is null. By |
|
167 *the same token, the bounding box of a <path> with an empty |
|
168 *SVGPath (i.e., one with no path commands, which may happen after |
|
169 *creating a new <path> element with a Document.createElementNS |
|
170 *call) is also null.<br> |
|
171 *<br> |
|
172 *<tt><g id="emptyG" /> |
|
173 *<br> |
|
174 *<br> |
|
175 *[emptyG] : {null} |
|
176 *</tt><br> |
|
177 *<br> |
|
178 *<h3>Example #7: Impact of display='none' and visibility='hidden'<br> |
|
179 *</h3> |
|
180 *This example shows how the bounding box of children with display='none' |
|
181 *are not accounted for in the computation of their parent's bounding |
|
182 *box. This reflects the definition of the display property and its |
|
183 *impact on rendering and bounding box computation. The example also |
|
184 *shows that elements with a 'hidden' visibility still contribute to |
|
185 *their parent's bounding box computation.<br> |
|
186 *<br> |
|
187 *<tt><g id="g1"> <br> |
|
188 * <g id="g1.1.display.none" display="none"> <br> |
|
189 * <rect id="rect1" x="10" y="10" width="40" height="40"/><br> |
|
190 * <g/> |
|
191 *<br> |
|
192 * <rect id="rect2.visibility.hidden" visibility="hidden" <br> |
|
193 * x="30" y="60" width="10" height="20"/> |
|
194 *<br> |
|
195 *</g></tt><br> |
|
196 *<br> |
|
197 *<tt>[g1] : {30.0, 60.0, 10.0, 20.0} <br> |
|
198 *[g1.1.display.none] : {10.0, 10.0, 40.0, 40.0}<br> |
|
199 *[rect1] : {10.0, 10.0, 40.0, 40.0}<br> |
|
200 *[rec2.visibility.hidden] : {30.0, 60.0, 10.0, 20.0}</tt><br> |
|
201 *<h3>Example #8: Concatenating bounding boxes in the container's user |
|
202 *space.<br> |
|
203 *</h3> |
|
204 *This example shows how the concatenation and computation of bounding |
|
205 *boxes for container element happens in the container's user space.<br> |
|
206 *<br> |
|
207 *<tt><g id="g1"><br> |
|
208 * <line id="line1" x2="100" y2="100" transform="rotate(-45)"/><br> |
|
209 *</g></tt><br> |
|
210 *<tt><br> |
|
211 *[g1] : {0.0, 0.0, 141.42136, 0}<br> |
|
212 *[line1] : {0.0, 0.0, 100.0, 100.0}</tt><br> |
|
213 *<h3>Example #9: No influence of stroke-width.</h3> |
|
214 *This example illustrates that stroking has no impact on the computation |
|
215 *of bounding boxes.<br> |
|
216 *<tt><br> |
|
217 *<g><br> |
|
218 * <line id="thickLine" stroke-width="10" x2="100" y2="0" /><br> |
|
219 *</g></tt><br> |
|
220 *<br> |
|
221 *[thickLine] : {0.0, 0.0, 100.0, 0.0}<br> |
|
222 *<br> |
|
223 *<h3>Example #10: No influence of viewBox.</h3> |
|
224 *This example illustrates that viewBox has no impact on the computation |
|
225 *of bounding boxes.<br> |
|
226 *<tt><br> |
|
227 *<svg id="rootSvg" width="500" height="300" viewBox="0 0 200 100" ><br> |
|
228 * <rect x="-100" y="-200" width="500" height="100" /><br> |
|
229 *</svg></tt><br> |
|
230 *<br> |
|
231 *[rootSVG] : {-100, -200, 500, 100}<br> |
|
232 * |
|
233 * |
|
234 */ |
|
235 public interface SVGLocatableElement extends SVGElement |
|
236 { |
|
237 |
|
238 /** |
|
239 * <p> |
|
240 * Returns the tight bounding box in current user coordinate space. Tight bounding box is the smallest |
|
241 * possible rectangle that includes the geometry of all contained graphics elements excluding stroke. |
|
242 * The calculation is done in the user coordinate space of the element. When bounding box |
|
243 * is calculated elements with display property (trait) set to none are ignored. Exact rules for the bounding |
|
244 * box calculation are given in the <a href="http://www.w3.org/TR/SVG/coords.html#ObjectBoundingBox">SVG spec</a>. |
|
245 * </p> |
|
246 * |
|
247 * @return the tight bounding box in current user coordinate space. |
|
248 */ |
|
249 public SVGRect getBBox(); |
|
250 |
|
251 /** |
|
252 * <p> |
|
253 * Returns the transformation matrix from current user units (i.e., after application of the transform attribute, if any) |
|
254 * to the parent user agent's notion of a "pixel". For display devices, ideally this represents a physical screen pixel. |
|
255 * For other devices or environments where physical pixel sizes are not known, then an algorithm similar to the CSS2 |
|
256 * definition of a "pixel" can be used instead. Note that <code>null</code> is returned if this element is not hooked into the |
|
257 * document tree. |
|
258 * </p> |
|
259 * |
|
260 * @return the transformation matrix from current user units to the parent user agent's notion of a "pixel". |
|
261 */ |
|
262 public SVGMatrix getScreenCTM(); |
|
263 |
|
264 /** |
|
265 * <p> |
|
266 * Returns the tight bounding box in screen coordinate space. Tight bounding box is the smallest |
|
267 * possible rectangle that includes the geometry of all contained graphics elements excluding stroke. |
|
268 * The box coordinates are in the screen coordinate space, which is connected to the current user |
|
269 * coordinate space by the matrix returned by {@link org.w3c.dom.svg.SVGLocatableElement#getScreenCTM getScreenCTM} method. |
|
270 * Note that <code>null</code> is returned if this element is not hooked into the |
|
271 * document tree. |
|
272 * </p> |
|
273 * |
|
274 * @return the tight bounding box in screen coordinate space. |
|
275 */ |
|
276 public SVGRect getScreenBBox(); |
|
277 } |