W3C home > Mailing lists > Public > public-svg-wg@w3.org > July to September 2012

svg2: Experiment with element summary box formatting for 'svg' and 'r...

From: SVG Working Group repository <cam@mcc.id.au>
Date: Tue, 21 Aug 2012 00:32:53 -0700
Message-Id: <hg.08ec4a483a84.1345534373.3034738116371802840@ps58493.dreamhostps.com>
To: public-svg-wg@w3.org
details:   https://svgwg.org/hg/svg2/rev/08ec4a483a84
branches:  
changeset: 336:08ec4a483a84
user:      Cameron McCormack <cam@mcc.id.au>
date:      Tue Aug 21 17:28:12 2012 +1000
description:
Experiment with element summary box formatting for 'svg' and 'rect'.

diffstat:

 master/definitions.xml       |    1 -
 master/intro.html            |   18 +-----
 master/shapes.html           |   54 ++++++++++++++++++++++
 master/struct.html           |  104 +++++++++++++++++++++++++++++++++++++++++++
 master/style/default_svg.css |    5 ++
 5 files changed, 167 insertions(+), 15 deletions(-)

diffs (291 lines):

diff --git a/master/definitions.xml b/master/definitions.xml
--- a/master/definitions.xml
+++ b/master/definitions.xml
@@ -760,17 +760,16 @@
     href='fonts.html#VKernElement'
     attributecategories='core'
     attributes='u1, g1, u2, g2, k'
     interfaces='SVGVKernElement'/>
 
   <!-- ... element categories ............................................ -->
 
   <elementcategory name='animation' href='intro.html#TermAnimationElement' elements='animate, animateColor, animateMotion, animateTransform, set'/>
-  <elementcategory name='basic shape' href='intro.html#TermBasicShapeElement' elements='circle, ellipse, line, polygon, polyline, rect'/>
   <elementcategory name='container' href='intro.html#TermContainerElement' elements='svg, g, defs, symbol, mask, pattern, marker, a, switch, glyph, missing-glyph'/>
   <elementcategory name='descriptive' href='intro.html#TermDescriptiveElement' elements='desc, title, metadata'/>
   <elementcategory name='gradient' href='intro.html#TermGradientElement' elements='linearGradient, radialGradient, meshGradient'/>
   <elementcategory name='graphics' href='intro.html#TermGraphicsElement' elements='path, text, rect, circle, ellipse, line, polyline, polygon, image, use'/>
   <elementcategory name='graphics referencing' href='intro.html#TermGraphicsReferencingElement' elements='use, image'/>
   <elementcategory name='light source' href='intro.html#TermLightSourceElement' elements='feDistantLight, fePointLight, feSpotLight'/>
   <elementcategory name='markable' href='intro.html#TermMarkableElement' elements='path, line, polyline, polygon'/>
   <elementcategory name='shape' href='intro.html#TermShapeElement' elements='circle, ellipse, line, path, polygon, polyline, rect'/>
diff --git a/master/intro.html b/master/intro.html
--- a/master/intro.html
+++ b/master/intro.html
@@ -226,19 +226,20 @@ expression "We recommend ...", "This spe
 
   <dt id="TermAnimationEventAttribute">animation event attribute</dt>
   <dd>An animation event attribute is an <a>event attribute</a> that specifies
   script to run for a particular animation-related event.  See
   <a href="script.html#AnimationEvents">Animation event attributes</a>.
   The animation event attributes are <edit:attributecategory name='animation event'/>.</dd>
 
   <dt id="TermBasicShapeElement">basic shape</dt>
-  <dd>Standard shapes which are predefined in SVG as a
-  convenience for common graphical operations. Specifically:
-  <edit:elementcategory name='basic shape'/>.</dd>
+  <dt id="TermShapeElement">shape</dt>
+  <dd>A graphics element that is defined by some combination of
+  straight lines and curves. Specifically:
+  <edit:elementcategory name='shape'/>.</dd>
 
   <dt id="TermBoundingBox">bounding box</dt>
   <dd>
     <p class="issue">Need a definition, which can probably be ported over
     from SVG Tiny 1.2.</p>
   </dd>
 
   <dt id="TermCanvas">canvas</dt>
@@ -502,27 +503,16 @@ expression "We recommend ...", "This spe
   <a href="styling.html">Styling</a>.</dd>
       
   <dt id="TermRootmostSVGElement">rootmost <span class="element-name">'svg'</span> element</dt>
   <dd>The rootmost <a>'svg'</a> element is the furthest
   <a>'svg'</a> ancestor element that does not exit an
   <a>SVG context</a>.
   See also <a>SVG document fragment</a>.</dd>
 
-  <dt id="TermShapeElement">shape</dt>
-  <dd>A graphics element that is defined by some combination of
-  straight lines and curves. Specifically:
-  <a>'path'</a>,
-  <a>'rect'</a>,
-  <a>'circle'</a>,
-  <a>'ellipse'</a>,
-  <a>'line'</a>,
-  <a>'polyline'</a> and
-  <a>'polygon'</a>.</dd>
-
   <dt id="TermStroke">stroke</dt>
   <dd>The operation of <a>painting</a> the outline
   of a <a>shape</a> or the outline of
   character glyphs in a text string.</dd>
 
   <dt id="TermStructuralElement">structural element</dt>
   <dd>The structural elements are those which define the primary
   structure of an SVG document.  Specifically, the following
diff --git a/master/shapes.html b/master/shapes.html
--- a/master/shapes.html
+++ b/master/shapes.html
@@ -43,16 +43,70 @@ that it is clear for example where dashi
 <h2 id="RectElement">The <span class="element-name">'rect'</span> element</h2>
 
 <edit:with element='rect'>
 
 <p>The <a>'rect'</a> element defines a rectangle which is axis-aligned
 with the current <a>user coordinate system</a>. Rounded rectangles can be achieved by setting
 appropriate values for attributes <a>'rx'</a> and <a>'ry'</a>.</p>
 
+<table class="propdef eltdef">
+  <tr>
+    <th>Name:</th>
+    <td><span class="element-name" style="font-size: inherit">rect</span></td>
+  </tr>
+  <tr>
+    <th>Categories:</th>
+    <td><a href="intro.html#TermGraphicsElement">Graphics element</a>, <a href="intro.html#TermShapeElement">shape element</a></td>
+  </tr>
+  <tr>
+    <th>Content model:</th>
+    <td>
+      <p>Any number of the following elements, in any order:</p>
+      <p>
+        <a href="intro.html#TermAnimationElement">animation elements</a>,
+        <a href="intro.html#TermDescriptiveElement">descriptive elements</a>,
+        <span class="element-name"><a href="masking.html#MaskElement"><span>mask</span></a></span>
+      </p>
+    </td>
+  </tr>
+  <tr>
+    <th>Common attributes:</th>
+    <td>
+      <a href="intro.html#TermConditionalProcessingAttribute">conditional processing attributes</a>,
+      <a href="intro.html#TermCoreAttribute">core attributes</a>,
+      <a href="intro.html#TermGraphicalEventAttribute">graphical event attributes</a>,
+      <a href="intro.html#TermPresentationAttribute">presentation attributes</a>
+    </td>
+  </tr>
+  <tr>
+    <th>Specific attributes:</th>
+    <td>
+      <span class="attr-name"><a href="#RectElementXAttribute"><span>x</span></a></span>,
+      <span class="attr-name"><a href="#RectElementYAttribute"><span>y</span></a></span>,
+      <span class="attr-name"><a href="#RectElementWidthAttribute"><span>width</span></a></span>,
+      <span class="attr-name"><a href="#RectElementHeightAttribute"><span>height</span></a></span>,
+      <span class="attr-name"><a href="#RectElementRXAttribute"><span>rx</span></a></span>,
+      <span class="attr-name"><a href="#RectElementRYAttribute"><span>ry</span></a></span>
+    </td>
+  </tr>
+  <tr>
+    <th>DOM Interface:</th>
+    <td>
+<pre class="idl">interface <b>SVGRectElement</b> : <a>SVGGraphicsElement</a> {
+  readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="shapes.html#__svg__SVGRectElement__x">x</a>;
+  readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="shapes.html#__svg__SVGRectElement__y">y</a>;
+  readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="shapes.html#__svg__SVGRectElement__width">width</a>;
+  readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="shapes.html#__svg__SVGRectElement__height">height</a>;
+  readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="shapes.html#__svg__SVGRectElement__rx">rx</a>;
+  readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="shapes.html#__svg__SVGRectElement__ry">ry</a>;
+};</pre>
+    </td>
+  </tr>
+</table>
 <edit:elementsummary name='rect'/>
 
     <div class="adef-list">
       <p><em>Attribute definitions:</em></p>
       <dl>
         <dt id="RectElementXAttribute"><span
         class="adef">x</span> = "<span class="attr-value"><a
         href="types.html#DataTypeCoordinate">&lt;coordinate&gt;</a></span>"</dt>
diff --git a/master/struct.html b/master/struct.html
--- a/master/struct.html
+++ b/master/struct.html
@@ -97,16 +97,120 @@ explicit namespace prefix must be assign
 
 <p>Namespace prefixes can be specified on ancestor elements (illustrated
 in the <a href="#EmbeddedSVGExample">above example</a>). For more
 information, refer to the <a href="http://www.w3.org/TR/2006/REC-xml-names-20060816/"><cite>Namespaces in XML</cite></a> Recommendation
 [<a href="refs.html#ref-XML-NS">XML-NS</a>].</p>
 
 <h3 id="SVGElement">The <span class='element-name'>'svg'</span> element</h3>
 
+<table class="propdef eltdef">
+  <tr>
+    <th>Name:</th>
+    <td><span class="element-name" style="font-size: inherit">svg</span></td>
+  </tr>
+  <tr>
+    <th>Categories:</th>
+    <td><a href="intro.html#TermContainerElement">Container element</a>, <a href="intro.html#TermStructuralElement">structural element</a></td>
+  </tr>
+  <tr>
+    <th>Content model:</th>
+    <td>
+      <p>Any number of the following elements, in any order:</p>
+      <p>
+        <a href="intro.html#TermAnimationElement">animation elements</a>,
+        <a href="intro.html#TermDescriptiveElement">descriptive elements</a>,
+        <a href="intro.html#TermGradientElement">gradient elements</a>,
+        <a href="intro.html#TermShapeElement">shape elements</a>,
+        <a href="intro.html#TermStructuralElement">structural elements</a>,
+        <span class="element-name"><a href="linking.html#AElement"><span>a</span></a></span>, <span class="element-name"><a href="text.html#AltGlyphDefElement"><span>altGlyphDef</span></a></span>, <span class="element-name"><a href="masking.html#ClipPathElement"><span>clipPath</span></a></span>, <span class="element-name"><a href="color.html#ColorProfileElement"><span>color-profile</span></a></span>, <span class="element-name"><a href="interact.html#CursorElement"><span>cursor</span></a></span>, <span class="element-name"><a href="https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#FilterElement"><span>filter</span></a></span>, <span class="element-name"><a href="fonts.html#FontElement"><span>font</span></a></span>, <span class="element-name"><a href="fonts.html#FontFaceElement"><span>font-face</span></a></span>, <span class="element-name"><a href="extend.html#ForeignObjectElement"><span>foreignObject</span></a></span>, <span class="element-name"><a href="struct.html
 #ImageElement"><span>image</span></a></span>, <span class="element-name"><a href="painting.html#MarkerElement"><span>marker</span></a></span>, <span class="element-name"><a href="masking.html#MaskElement"><span>mask</span></a></span>, <span class="element-name"><a href="pservers.html#PatternElement"><span>pattern</span></a></span>, <span class="element-name"><a href="script.html#ScriptElement"><span>script</span></a></span>, <span class="element-name"><a href="styling.html#StyleElement"><span>style</span></a></span>, <span class="element-name"><a href="struct.html#SwitchElement"><span>switch</span></a></span>, <span class="element-name"><a href="text.html#TextElement"><span>text</span></a></span>, <span class="element-name"><a href="linking.html#ViewElement"><span>view</span></a></span>
+      </p>
+    </td>
+  </tr>
+  <tr>
+    <th>Common attributes:</th>
+    <td>
+      <a href="intro.html#TermConditionalProcessingAttribute">conditional processing attributes</a>,
+      <a href="intro.html#TermCoreAttribute">core attributes</a>,
+      <a href="intro.html#TermDocumentEventAttribute">document event attributes</a>,
+      <a href="intro.html#TermGraphicalEventAttribute">graphical event attributes</a>,
+      <a href="intro.html#TermPresentationAttribute">presentation attributes</a>,
+      <span class="attr-name"><a href="coords.html#ViewBoxAttribute"><span>viewBox</span></a></span>,
+      <span class="attr-name"><a href="coords.html#PreserveAspectRatioAttribute"><span>preserveAspectRatio</span></a></span>
+    </td>
+  </tr>
+  <tr>
+    <th>Specific attributes:</th>
+    <td>
+      <span class="attr-name"><a href="struct.html#SVGElementXAttribute"><span>x</span></a></span>,
+      <span class="attr-name"><a href="struct.html#SVGElementYAttribute"><span>y</span></a></span>,
+      <span class="attr-name"><a href="struct.html#SVGElementWidthAttribute"><span>width</span></a></span>,
+      <span class="attr-name"><a href="struct.html#SVGElementHeightAttribute"><span>height</span></a></span>,
+      <span class="attr-name"><a href="struct.html#SVGElementVersionAttribute"><span>version</span></a></span>,
+      <span class="attr-name"><a href="struct.html#SVGElementBaseProfileAttribute"><span>baseProfile</span></a></span>,
+      <span class="attr-name"><a href="struct.html#SVGElementPlaybackOrderAttribute"><span>playbackOrder</span></a></span>,
+      <span class="attr-name"><a href="struct.html#SVGElementTimelineBeginAttribute"><span>timelineBegin</span></a></span>,
+      <span class="attr-name"><a href="interact.html#ZoomAndPanAttribute"><span>zoomAndPan</span></a></span>
+    </td>
+  </tr>
+  <tr>
+    <th>DOM Interface:</th>
+    <td>
+<pre class="idl">interface <b>SVGSVGElement</b> : <a>SVGGraphicsElement</a> {
+
+  readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="struct.html#__svg__SVGSVGElement__x">x</a>;
+  readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="struct.html#__svg__SVGSVGElement__y">y</a>;
+  readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="struct.html#__svg__SVGSVGElement__width">width</a>;
+  readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="struct.html#__svg__SVGSVGElement__height">height</a>;
+  readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a> <a href="struct.html#__svg__SVGSVGElement__viewport">viewport</a>;
+  readonly attribute float <a href="struct.html#__svg__SVGSVGElement__pixelUnitToMillimeterX">pixelUnitToMillimeterX</a>;
+  readonly attribute float <a href="struct.html#__svg__SVGSVGElement__pixelUnitToMillimeterY">pixelUnitToMillimeterY</a>;
+  readonly attribute float <a href="struct.html#__svg__SVGSVGElement__screenPixelToMillimeterX">screenPixelToMillimeterX</a>;
+  readonly attribute float <a href="struct.html#__svg__SVGSVGElement__screenPixelToMillimeterY">screenPixelToMillimeterY</a>;
+  readonly attribute boolean <a href="struct.html#__svg__SVGSVGElement__useCurrentView">useCurrentView</a>;
+  readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGViewSpec">SVGViewSpec</a> <a href="struct.html#__svg__SVGSVGElement__currentView">currentView</a>;
+           attribute float <a href="struct.html#__svg__SVGSVGElement__currentScale">currentScale</a>;
+  readonly attribute <a class="idlinterface" href="coords.html#InterfaceSVGPoint">SVGPoint</a> <a href="struct.html#__svg__SVGSVGElement__currentTranslate">currentTranslate</a>;
+
+  unsigned long <a href="struct.html#__svg__SVGSVGElement__suspendRedraw">suspendRedraw</a>(unsigned long maxWaitMilliseconds);
+  void <a href="struct.html#__svg__SVGSVGElement__unsuspendRedraw">unsuspendRedraw</a>(unsigned long suspendHandleID);
+  void <a href="struct.html#__svg__SVGSVGElement__unsuspendRedrawAll">unsuspendRedrawAll</a>();
+  void <a href="struct.html#__svg__SVGSVGElement__forceRedraw">forceRedraw</a>();
+  void <a href="struct.html#__svg__SVGSVGElement__pauseAnimations">pauseAnimations</a>();
+  void <a href="struct.html#__svg__SVGSVGElement__unpauseAnimations">unpauseAnimations</a>();
+  boolean <a href="struct.html#__svg__SVGSVGElement__animationsPaused">animationsPaused</a>();
+  float <a href="struct.html#__svg__SVGSVGElement__getCurrentTime">getCurrentTime</a>();
+  void <a href="struct.html#__svg__SVGSVGElement__setCurrentTime">setCurrentTime</a>(float seconds);
+  <a class="idlinterface"
+   href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-536297177">NodeList</a> <a href="struct.html#__svg__SVGSVGElement__getIntersectionList">getIntersectionList</a>(<a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a> rect, <a class="idlinterface" href="types.html#InterfaceSVGElement">SVGElement</a> referenceElement);
+  <a class="idlinterface"
+   href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-536297177">NodeList</a> <a href="struct.html#__svg__SVGSVGElement__getEnclosureList">getEnclosureList</a>(<a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a> rect, <a class="idlinterface" href="types.html#InterfaceSVGElement">SVGElement</a> referenceElement);
+  boolean <a href="struct.html#__svg__SVGSVGElement__checkIntersection">checkIntersection</a>(<a class="idlinterface" href="types.html#InterfaceSVGElement">SVGElement</a> element, <a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a> rect);
+  boolean <a href="struct.html#__svg__SVGSVGElement__checkEnclosure">checkEnclosure</a>(<a class="idlinterface" href="types.html#InterfaceSVGElement">SVGElement</a> element, <a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a> rect);
+  void <a href="struct.html#__svg__SVGSVGElement__deselectAll">deselectAll</a>();
+  <a class="idlinterface" href="types.html#InterfaceSVGNumber">SVGNumber</a> <a href="struct.html#__svg__SVGSVGElement__createSVGNumber">createSVGNumber</a>();
+  <a class="idlinterface" href="types.html#InterfaceSVGLength">SVGLength</a> <a href="struct.html#__svg__SVGSVGElement__createSVGLength">createSVGLength</a>();
+  <a class="idlinterface" href="types.html#InterfaceSVGAngle">SVGAngle</a> <a href="struct.html#__svg__SVGSVGElement__createSVGAngle">createSVGAngle</a>();
+  <a class="idlinterface" href="coords.html#InterfaceSVGPoint">SVGPoint</a> <a href="struct.html#__svg__SVGSVGElement__createSVGPoint">createSVGPoint</a>();
+  <a class="idlinterface" href="coords.html#InterfaceSVGMatrix">SVGMatrix</a> <a href="struct.html#__svg__SVGSVGElement__createSVGMatrix">createSVGMatrix</a>();
+  <a class="idlinterface" href="types.html#InterfaceSVGRect">SVGRect</a> <a href="struct.html#__svg__SVGSVGElement__createSVGRect">createSVGRect</a>();
+  <a class="idlinterface" href="coords.html#InterfaceSVGTransform">SVGTransform</a> <a href="struct.html#__svg__SVGSVGElement__createSVGTransform">createSVGTransform</a>();
+  <a class="idlinterface" href="coords.html#InterfaceSVGTransform">SVGTransform</a> <a href="struct.html#__svg__SVGSVGElement__createSVGTransformFromMatrix">createSVGTransformFromMatrix</a>(<a class="idlinterface" href="coords.html#InterfaceSVGMatrix">SVGMatrix</a> matrix);
+  <a class="idlinterface"
+   href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614">Element</a> <a href="struct.html#__svg__SVGSVGElement__getElementById">getElementById</a>(DOMString elementId);
+};
+
+<a>SVGSVGElement</a> implements <a>ViewCSS</a>;
+<a>SVGSVGElement</a> implements <a>DocumentCSS</a>;
+<a>SVGSVGElement</a> implements <a>SVGFitToViewBox</a>;
+<a>SVGSVGElement</a> implements <a>SVGZoomAndPan</a>;</pre>
+    </td>
+  </tr>
+</table>
+
 <edit:elementsummary name='svg'/>
 
 <div class="annotation requirement">
   <table>
     <tr>
       <th>SVG 2 Requirement:</th>
       <td>Support transforming <a>'svg'</a> elements.</td>
     </tr>
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
@@ -326,8 +326,13 @@ table.attrtable tbody td:first-child { w
 
 table > caption { caption-side: bottom }
 
 table.PathDataTable { border-spacing: 2px; border-style: outset; border-width: 1px }
 table.PathDataTable td,
 table.PathDataTable th { padding: 5px; border-style: inset; border-width: 1px }
 
 .colorpatch { width: 14px; height: 14px; border: 1px solid black; }
+
+.eltdef { border-left: 0.5em solid #52A7E0 !important; background: #E9F4FB !important; }
+.eltdef td > p:first-child { margin-top: 0 }
+.eltdef th { white-space: nowrap }
+.eltdef pre.idl { margin: 0; padding: 0; background: none }
Received on Tuesday, 21 August 2012 07:34:33 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 21 August 2012 07:34:33 GMT