W3C home > Mailing lists > Public > public-svg-wg@w3.org > January to March 2014

svg2: Removed getStrokeBBox() and extended getBBox() with its functio...

From: SVG Working Group repository <cam+svgwgrepo@mcc.id.au>
Date: Mon, 03 Feb 2014 20:05:53 -0800
Message-Id: <hg.c144d4186eeb.1391486753.3034738116371802840@ps58493.dreamhostps.com>
To: public-svg-wg@w3.org
details:   https://svgwg.org/hg/svg2/rev/c144d4186eeb
branches:  
changeset: 599:c144d4186eeb
user:      Cameron McCormack <cam@mcc.id.au>
date:      Tue Feb 04 15:03:33 2014 +1100
description:
Removed getStrokeBBox() and extended getBBox() with its functionality (plus more). (ACTION-3581)

diffstat:

 master/changes.html          |    5 +-
 master/coords.html           |  111 +++++++++++++++++++++++++++++++++++++++++++
 master/style/default_svg.css |    9 +++
 master/types.html            |   53 +++++++------------
 4 files changed, 144 insertions(+), 34 deletions(-)

diffs (332 lines):

diff --git a/master/changes.html b/master/changes.html
--- a/master/changes.html
+++ b/master/changes.html
@@ -72,29 +72,31 @@ have been made.</p>
   <li>Added an <a>SVGGraphicsElement</a> interface.</li>
 
   <li>Added an <a>SVGGeometryElement</a> interface with isPointInFill and isPointInStroke methods.</li>
 
   <li>Removed the SVGExternalResourcesRequired interface.</li>
 
   <li>Added constructors to <a>SVGNumber</a>, <a>SVGLength</a>, <a>SVGAngle</a> and <a>SVGRect</a>.</li>
 
-  <li>Added <a href="types.html#__svg__SVGGraphicsElement__getStrokeBBox">getStrokeBBox</a> to get the tight stroke bounding box.</li>
+  <li>Added getStrokeBBox on <a>SVGGraphicsElement</a> to get the tight stroke bounding box.</li>
 
   <li>Added base value accessors on <a>SVGAnimatedLength</a> and <a>SVGAnimatedLengthList</a> for each of the CSS length units supported.</li>
 
   <li>Make viewportElement and ownerSVGElement on <a>SVGElement</a> nullable.</li>
 
   <li>Removed the getPresentationAttribute operation on <a>SVGElement</a> and the SVGColor and SVGICCColor interfaces.</li>
 
   <li class='added-since-last-wd'>Added <a href="types.html#__svg__SVGElement__focus">focus</a> and <a href="types.html#__svg__SVGElement__blur">blur</a> operations and <a href='types.html#__svg__SVGElement__tabIndex'>tabIndex</a> attribute to <a>SVGElement</a>.</li>
 
   <li class='added-since-last-wd'>Added <a href="types.html#__svg__SVGDocument__activeElement">activeElement</a> attribute to <a>Document</a>.</li>
 
   <li class='added-since-last-wd'>Made <a>SVGElement</a> implement the <a>GlobalEventHandlers</a> interface from HTML.</li>
+
+  <li class='added-since-last-wd'>Removed getStrokeBBox from <a>SVGGraphicsElement</a> and extended <a href="types.html#__svg__SVGGraphicsElement__getBBox">getBBox</a> with a dictionary argument that controls which parts of the element are included in the returned bounding box.</li>
 </ul>
 
 <h3 id="structure">Document Structure chapter</h3>
 
 <ul>
   <li>Deprecated the <code>suspendRedraw</code>, <code>unsuspendRedraw</code> and <code>unsuspendRedrawAll</code> methods in the SVGSVGElement interface.</li>
 
   <li>Removed the <span class="attr-name">'externalResourcesRequired'</span> attribute.</li>
@@ -124,16 +126,17 @@ have been made.</p>
   <li>Removed the <span class="attr-name">'contentStyleType'</span> attribute.</li>
 </ul>
 
 <h3 id="coords">Coordinate Systems, Transformations and Units chapter</h3>
 
 <ul>
   <li>Added constructors to <a>SVGPoint</a>, <a>SVGMatrix</a> and <a>SVGTransform</a>.</li>
   <li>Make <a>SVGMatrix</a>.skew{X,Y} throw an exception on bad values.</li>
+  <li class='added-since-last-wd'>Added an algorithm which can compute a bounding box for an element.</li>
 </ul>
 
 <h3 id="paths">Paths chapter</h3>
 
 <ul>
   <li class="added-since-last-wd">Added new <strong>B</strong> and
   <strong>b</strong> "bearing" path commands.</li>
 </ul>
diff --git a/master/coords.html b/master/coords.html
--- a/master/coords.html
+++ b/master/coords.html
@@ -1024,26 +1024,137 @@ size as the middle rectangle, which is s
 user units. In particular, note that the <a>'stroke-width'</a> property in the
 middle rectangle is set to 1% of the
 <code>sqrt((<em>actual-width</em>)**2 +
 (<em>actual-height</em>)**2) / sqrt(2)</code>, which in this
 case is .01*sqrt(4000*4000+2000*2000)/sqrt(2), or 31.62. The
 bottom rectangle of the group illustrates what happens when
 values specified in percentage units are scaled.</p>
 
+<div class="ready-for-wg-review">
+
+<h2 id="BoundingBoxes">Bounding boxes</h2>
+
+<p>The bounding box of an element is an axis-aligned rectangle in a given
+coordinate system that tightly contains certain parts of the element.
+The following algorithm describes how to compute the bounding box for a
+given element.  The inputs to the algorithm are:</p>
+
+<ul>
+  <li><var>element</var>, the element we are computing a bounding box for;</li>
+  <li><var>space</var>, a coordinate space in which the bounding box will be computed;</li>
+  <li><var>fill</var>, a boolean indicating whether the bounding box includes the geometry of the element and its descendants;</li>
+  <li><var>stroke</var>, a boolean indicating whether the bounding box includes the stroke of the element and its descendants;</li>
+  <li><var>markers</var>, a boolean indicating whether the bounding box includes the markers of the element and its descendants; and</li>
+  <li><var>clipped</var>, a boolean indicating whether the bounding box is affected by any clipping paths applied to the element and its descendants.</li>
+</ul>
+
+<p class='issue'>Need to define what the union of rectangles with no area means.</p>
+
+<p>The algorithm to compute the bounding box is as follows, depending on the type of <var>element</var>:</p>
+
+<dl class="switch">
+  <dt>a <a>shape</a></dt>
+  <dt>a <a>text content element</a></dt>
+  <dt>an <a>'a'</a> element within a <a>text content element</a></dt>
+  <dd>
+    <ol class="algorithm">
+      <li>Let <var>box</var> be a rectangle initialized to (0, 0, 0, 0).</li>
+      <li>Let <var>fill-shape</var> be the <a>equivalent path</a> of <var>element</var>
+      if it is a <a>shape</a>, or a shape that includes each of the glyph cells corresponding
+      to the text within the elements otherwise.</li>
+      <li>If <var>fill</var> is true, then set <var>box</var> to the tightest rectangle
+      in the coordinate system <var>space</var> that contains <var>fill-shape</var>.
+      <p class='issue'>We should say something about allowed approximations such as using the bounding
+      box of a B├ęzier segment's control points.</p></li>
+      <li>If <var>stroke</var> is true and the element's <a>'stroke'</a> is anything other than
+      <span class='prop-value'>none</span>, then set <var>box</var> to be the union of <var>box</var> and the
+      tightest rectangle in coordinate system <var>space</var> that contains the <a href="painting.html#StrokeShape">stroke shape</a> of the
+      element, with the assumption that the element has no dash pattern.</li>
+      <li>If <var>markers</var> is true, then for each marker <var>marker</var> rendered on the element:
+        <ol>
+          <li>For each descendant <a>graphics element</a> <var>child</var> of the <a>'marker element'</a> element
+          that defines <var>marker</var>'s content:
+            <ol>
+              <li>If <var>child</var> has an ancestor element within the <a>'marker element'</a> that is
+              <span class='prop-value'>'display: none'</span>, has a failing <a>conditional processing attribute</a>,
+              or is not an <a>'a'</a>, <a>'g'</a>, <a>'svg'</a> or <a>'switch'</a> element, then
+              continue to the next descendant <a>graphics element</a>.</li>
+              <li>Otherwise, set <var>box</var> to be the union of <var>box</var> and the result of invoking the
+              algorithm to compute a bounding box with <var>child</var> as the element,
+              <var>space</var> as the target coordinate space, true for <var>fill</var>,
+              <var>stroke</var> and <var>markers</var>, and <var>clipped</var> for <var>clipped</var>.
+              <p class='issue'>Need to determine whether <span class='prop-value'>'display: none'</span> on the
+              <a>'marker element'</a> element itself has any effect here.</p></li>
+            </ol>
+          </li>
+        </ol>
+      </li>
+      <li>If <var>clipped</var> is true and the value of <a>'clip-path'</a> on <var>element</var> is not
+      <span class='prop-value'>none</span>, then set <var>box</var> to be the tighest rectangle
+      in coordinate system <var>space</var> that contains the intersection of <var>box</var> and the clipping path.</li>
+      <li>Return <var>box</var>.</li>
+    </ol>
+  </dd>
+  <dt>a <a>container element</a></dt>
+  <dt><a>'use'</a></dt>
+  <dd>
+    <ol class="algorithm">
+      <li>Let <var>box</var> be a rectangle initialized to (0, 0, 0, 0).</li>
+      <li>Let <var>parent</var> be the <a>container element</a> if it is one, or the
+      root of the <a>'use'</a> element's shadow tree otherwise.</li>
+      <li>For each descendant <a>graphics element</a> <var>child</var> of <var>parent</var>:
+        <ol>
+          <li>If <var>child</var> has an ancestor element within <var>parent</var> that is
+          <span class='prop-value'>'display: none'</span>, has a failing <a>conditional processing attribute</a>,
+          or is not an <a>'a'</a>, <a>'g'</a>, <a>'svg'</a> or <a>'switch'</a> element, then
+          continue to the next descendant <a>graphics element</a>.</li>
+          <li>Otherwise, set <var>box</var> to be the union of <var>box</var> and the result of invoking the
+          algorithm to compute a bounding box with <var>child</var> as the element
+          and the same values for <var>space</var>, <var>fill</var>, <var>stroke</var>,
+          <var>markers</var> and <var>clipped</var> as the corresponding algorithm input values.</li>
+        </ol>
+      </li>
+      <li>Return <var>box</var>.</li>
+    </ol>
+  </dd>
+  <dt><a>'canvas'</a></dt>
+  <dt><a>'foreignObject'</a></dt>
+  <dt><a>'iframe'</a></dt>
+  <dt><a>'image'</a></dt>
+  <dt><a>'video'</a></dt>
+  <dd>
+    <ol class="algorithm">
+      <li>Return the tightest rectangle in coordinate space <var>space</var> that
+      contains the rectangle defined by the 
+      <span class='attr-name'>'x'</span>,
+      <span class='attr-name'>'y'</span>,
+      <span class='attr-name'>'width'</span> and
+      <span class='attr-name'>'height'</span> attributes of the element.
+      <p class='issue'>This returns a bounding box even if <var>fill</var> is false. Is this what we want?</p>
+      </li>
+    </ol>
+  </dd>
+</dl>
+
+</div>
+
 <h2 id="ObjectBoundingBoxUnits">Object bounding box units</h2>
 
 <p id="ObjectBoundingBox">The following elements offer the option of expressing
 coordinate values and lengths as fractions (and, in some cases,
 percentages) of the <a>bounding box</a>,
 by setting a specified attribute to <span class="attr-value">'objectBoundingBox'</span>
 on the given element:</p>
 
 <p class="issue">Need a line for <a>'meshGradient'</a>.</p>
 
+<p class="issue">Need to invoke the bounding box computation algorithm from the previous
+section with <var>fill</var> = true and the other options false.</p>
+
 <table class='vert'>
   <tr>
     <th>Element</th>
     <th>Attribute</th>
     <th>Effect</th>
   </tr>
   <tr>
     <edit:with element='linearGradient'>
diff --git a/master/style/default_svg.css b/master/style/default_svg.css
--- a/master/style/default_svg.css
+++ b/master/style/default_svg.css
@@ -374,16 +374,25 @@ table.propdef.attrdef th:first-child + t
 table.propdef.attrdef td:first-child + td { width: auto }
 
 table.propdef.attrdef th:first-child + th + th,
 table.propdef.attrdef td:first-child + td + td { width: 6em }
 
 table.propdef.attrdef th:first-child + th + th + th,
 table.propdef.attrdef td:first-child + td + td + td { width: 6em; padding-right: 0 !important }
 
+ol.algorithm ol {
+  border-left: 1px solid #90b8de;
+  margin-left: 1em;
+}
+ol.algorithm ol.algorithm {
+  border-left: none;
+  margin-left: 0;
+}
+
 /* HTML5-like switch statements. */
 dl.switch > dd > ol.only {
   margin-left: 0;
 }
 dl.switch > dd > ol.algorithm {
   margin-left: -2em;
 }
 dl.switch {
diff --git a/master/types.html b/master/types.html
--- a/master/types.html
+++ b/master/types.html
@@ -4012,24 +4012,30 @@ Corresponds to value <span class="attr-v
   </table>
 </div>
 
 <p>Interface <a>SVGGraphicsElement</a> represents SVG elements whose primary purpose
 is to directly render graphics into a group. The
 <a>'transform'</a> property applies to all <a>SVGGraphicsElement</a>. All <a>SVGGraphicsElement</a>
 have a bounding box in current user space.</p>
 
-<pre class="idl">interface <b>SVGGraphicsElement</b> : <a>SVGElement</a> {
+<pre class="idl">dictionary <b id="SVGBoundingBoxOptions">SVGBoundingBoxOptions</b> {
+  bool fill = true;
+  bool stroke = false;
+  bool markers = false;
+  bool clipped = false;
+};
+
+interface <b>SVGGraphicsElement</b> : <a>SVGElement</a> {
   readonly attribute <a class="idlinterface" href="coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a> <a href="types.html#__svg__SVGGraphicsElement__transform">transform</a>;
 
   readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGElement">SVGElement</a>? <a href="types.html#__svg__SVGGraphicsElement__nearestViewportElement">nearestViewportElement</a>;
   readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGElement">SVGElement</a>? <a href="types.html#__svg__SVGGraphicsElement__farthestViewportElement">farthestViewportElement</a>;
 
-  <a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a> <a href="types.html#__svg__SVGGraphicsElement__getBBox">getBBox</a>();
-  <a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a> <a href="types.html#__svg__SVGGraphicsElement__getStrokeBBox">getStrokeBBox</a>();
+  <a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a> <a href="types.html#__svg__SVGGraphicsElement__getBBox">getBBox</a>(optional <a href="#SVGBoundingBoxOptions">SVGBoundingBoxOptions</a> options);
   <a class="idlinterface" href="coords.html#InterfaceSVGMatrix">SVGMatrix</a>? <a href="types.html#__svg__SVGGraphicsElement__getCTM">getCTM</a>();
   <a class="idlinterface" href="coords.html#InterfaceSVGMatrix">SVGMatrix</a>? <a href="types.html#__svg__SVGGraphicsElement__getScreenCTM">getScreenCTM</a>();
   <a class="idlinterface" href="coords.html#InterfaceSVGMatrix">SVGMatrix</a> <a href="types.html#__svg__SVGGraphicsElement__getTransformToElement">getTransformToElement</a>(<a class="idlinterface" href="types.html#InterfaceSVGGraphicsElement">SVGGraphicsElement</a> element);
 };
 
 <a>SVGGraphicsElement</a> implements <a>SVGTests</a>;</pre>
 
 <dl class="interface">
@@ -4058,59 +4064,40 @@ have a bounding box in current user spac
           The farthest ancestor <a>'svg'</a> element. Null if the current element
           is the <a>outermost svg element</a>.
         </div>
       </dd>
     </dl>
   </dd>
   <dt class="operations-header">Operations:</dt>
   <dd>
+    <div class="ready-for-wg-review">
     <dl class="attributes">
-      <dt id="__svg__SVGGraphicsElement__getBBox" class="operation first-child"><a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a> <b>getBBox</b>()</dt>
+      <dt id="__svg__SVGGraphicsElement__getBBox" class="operation first-child"><a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a> <b>getBBox</b>(optional <a href="#SVGBoundingBoxOptions">SVGBoundingBoxOptions</a> <var>options</var>)</dt>
       <dd class="operation">
         <div>
-          Returns the tight bounding box in current user space (i.e., after
-          application of the <a>'transform'</a> property) on the
-          geometry of all contained graphics elements, exclusive of stroking, clipping, masking and
-          filter effects. Note that getBBox must return the actual bounding box
-          at the time the method was called, even in case the element has not
-          yet been rendered.
+          <p>Returns the result of invoking the <a href="coords.html#BoundingBoxes">bounding box algorithm</a>
+          for the element, with <var>fill</var>, <var>stroke</var>, <var>markers</var>
+          and <var>clipped</var> members of the <var>options</var> dictionary argument
+          used to control which parts of the element are included in the bounding box,
+	  using the element's user space as the coordinate system to return the
+	  bounding box in.</p>
         </div>
         <dl class="operation">
           <dt class="returns-header">Returns</dt>
           <dd>
             <div>
               An <a>SVGRect</a> object that defines the bounding box.
             </div>
           </dd>
         </dl>
       </dd>
-      <dt id="__svg__SVGGraphicsElement__getStrokeBBox" class="operation"><a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a> <b>getStrokeBBox</b>()</dt>
-      <dd class="operation">
-        <div>
-          Returns the union of the tight bounding box (see <a>getBBox</a>), the stroke
-          bounding box and the stroke bounding box of applied markers in current user space
-          (i.e., after application of the <a>'transform'</a> property) on the
-          geometry of all contained graphics elements, exclusive of clipping, masking and
-          filter effects. The stroke bounding box takes the stroke style
-          properties <a>'stroke-width'</a>, <a>'stroke-linecap'</a>, <a>'stroke-linejoin'</a>,
-          <a>'stroke-miterlimit'</a>, <a>'stroke-dasharray'</a> and <a>'stroke-dashoffset'</a>
-          into account. Note that getStrokeBBox must
-          return the actual union of the bounding box at the time the method was called,
-          even in case the element has not yet been rendered.
-        </div>
-        <dl class="operation">
-          <dt class="returns-header">Returns</dt>
-          <dd>
-            <div>
-              An <a>SVGRect</a> object that defines the stroke bounding box.
-            </div>
-          </dd>
-        </dl>
-      </dd>
+    </dl>
+    </div>
+    <dl class="attributes">
       <dt id="__svg__SVGGraphicsElement__getCTM" class="operation"><a class="idlinterface" href="coords.html#InterfaceSVGMatrix">SVGMatrix</a>? <b>getCTM</b>()</dt>
       <dd class="operation">
         <div>
           Returns the transformation matrix from current user units (i.e., after
           application of the <a>'transform'</a> property) to the viewport
           coordinate system for the <a>nearestViewportElement</a>. Note that null 
           is returned if this element is not hooked into the document tree.
         </div>
Received on Tuesday, 4 February 2014 04:06:17 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 17:29:55 UTC