Add a section for buffered-rendering.
authorCameron McCormack <cam@mcc.id.au>
Wed, 23 May 2012 15:52:37 +1000
changeset 141 f398119d9541
parent 140 8fc92f9cb5b0
child 142 e2527f5a7335
Add a section for buffered-rendering.
Clean up the 'Inheritance of painting properties' section.
master/images/painting/inheritance.svg
master/painting.html
--- a/master/images/painting/inheritance.svg	Wed May 23 15:06:35 2012 +1000
+++ b/master/images/painting/inheritance.svg	Wed May 23 15:52:37 2012 +1000
@@ -1,21 +1,13 @@
-<?xml version="1.0" standalone="no"?>
-<svg width="7cm" height="2cm" viewBox="0 0 700 200"
-     xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <desc>Gradients apply to leaf nodes
-  </desc>
-  <g>
-    <defs>
-      <linearGradient id="MyGradient" gradientUnits="objectBoundingBox">
-        <stop offset="0%" stop-color="#F60" />
-        <stop offset="100%" stop-color="#FF6" />
-      </linearGradient>
-    </defs>
-    <rect x="1" y="1" width="698" height="198"
-          fill="none" stroke="blue" stroke-width="2" />
-    <g fill="url(#MyGradient)" >
-      <rect x="100" y="50" width="200" height="100"/>
-      <rect x="400" y="50" width="200" height="100"/>
-   </g>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="350" height="100" viewBox="0 0 350 100">
+  <defs>
+    <linearGradient id="OrangeYellow" gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="#F60"/>
+      <stop offset="100%" stop-color="#FF6"/>
+    </linearGradient>
+  </defs>
+  <g stroke="black" stroke-width="2px" fill="url(#OrangeYellow)">
+    <rect x="50" y="25" width="100" height="50"/>
+    <rect x="200" y="25" width="100" height="50"/>
   </g>
 </svg>
-
--- a/master/painting.html	Wed May 23 15:06:35 2012 +1000
+++ b/master/painting.html	Wed May 23 15:52:37 2012 +1000
@@ -1928,8 +1928,10 @@
      width="600" height="150" viewBox="0 0 600 150">
 
   <style>
-    text { font: 80px bold sans-serif; stroke-linejoin: round;
-           text-anchor: middle; fill: peachpuff; stroke: crimson; }
+    text {
+      font: 80px bold sans-serif; stroke-linejoin: round;
+      text-anchor: middle; fill: peachpuff; stroke: crimson;
+    }
   </style>
 
   <text x="150" y="100" stroke-width="6px">pizazz</text>
@@ -1937,18 +1939,16 @@
 </svg>
 ]]></pre>
 
-  <p style="text-align: center">
-    <img class="bordered" src="images/painting/paintorder.svg"
-         alt="Image showing text with the stroke painted below the fill."/>
-  </p>
+  <div class="figure">
+    <img class="bordered" src="images/painting/paintorder.svg"/>
+    <p class="caption">Text painted with its stroke below the fill.</p>
+  </div>
 </div>
 
-<h2 id="RenderingProperties">Rendering properties</h2>
+<div class="ready-for-wg-review">
+<h2 id="ColorInterpolation">Color space for interpolation: the
+<span class="property">'color-interpolation'</span> property</h2>
 
-<h3 id="ColorInterpolationProperties">Color interpolation space: the
-<span class="property">'color-interpolation'</span> property</h3>
-
-<div class="ready-for-wg-review">
 <table class="propdef">
   <tr>
     <th>Name:</th>
@@ -2125,6 +2125,8 @@
 performed according to the value of the <a>'color-interpolation'</a> property
 on the element being animated.</p>
 
+<h2 id="RenderingHints">Rendering hints</h2>
+
 <h3 id="ColorRenderingProperty">The <span class="property">'color-rendering'</span> property</h3>
 
 <table class="propdef">
@@ -2427,27 +2429,21 @@
 device is indexed color.</p>
 </div>
 
+<h3 id="BufferedRendering">The <span class="property">'buffered-rendering'</span>
+property</h3>
+
 <div class="annotation">
- <p>
-   SVG2 Requirement: Add buffered-rendering
- </p>
- <p>
-   Resolution: SVG 2 will add buffered-rendering (implementor feedback indicates that it is needed).
- </p>
- <p>
-   <a href="http://www.w3.org/2012/01/26-svg-irc#T21-28-56">SVG telcon 2012-01-26</a>.
- </p>
- <p>
-   Purpose: For caching rendered results for faster display.
- </p>
- <p>
-   Owner: Erik
- </p>
+ <p>SVG2 Requirement: Add buffered-rendering</p>
+ <p>Resolution: SVG 2 will add buffered-rendering (implementor feedback indicates that it is needed).</p>
+ <p><a href="http://www.w3.org/2012/01/26-svg-irc#T21-28-56">SVG telcon 2012-01-26</a>.</p>
+ <p>Purpose: For caching rendered results for faster display.</p>
+ <p>Owner: Erik</p>
 </div>
 
+<div class="ready-for-wg-review">
 <h2 id="InheritanceOfPaintingProperties">Inheritance of painting properties</h2>
 
-<p>The values of any of the painting properties described in this chapter can
+<p>The values of any of the painting properties defined in this chapter can
 be inherited from a given object's parent.  Painting, however, is always done
 on each <a>graphics element</a>
 individually, never at the <a>container element</a>
@@ -2456,10 +2452,6 @@
 through the <a>'g'</a> element down into each rectangle, each of which is
 rendered such that its interior is painted with the gradient.</p>
 
-<p><span class="example-ref">Example Inheritance</span></p>
-
-<edit:example href='images/painting/inheritance.svg' name='Inheritance' image='yes' link='yes'/>
-
 <p>Any painting properties defined in terms of the
 <a href="coords.html#ObjectBoundingBoxUnits">object's bounding box</a> use the
 bounding box of the <a>graphics element</a>
@@ -2469,6 +2461,20 @@
 bounding box of the entire <a>'text'</a> element. (See the discussion of
 <a href="text.html#ObjectBoundingBoxUnitsTextObjects">object bounding box units and text elements</a>.)</p>
 
+<div class="example">
+  <p>The following example shows how painting properties are inherited
+  from a <a>'g'</a> element to its child <a>'rect'</a> elements.</p>
+
+  <edit:includefile href="images/painting/inheritance.svg"/>
+
+  <div class="figure">
+    <img class="bordered" src="images/painting/inheritance.svg"/>
+    <p class="caption">Both rectangles are filled with the same orange-to-yellow
+    gradient.</p>
+  </div>
+</div>
+</div>
+
 <h2 id="DOMInterfaces">DOM interfaces</h2>
 
 <h3 id="InterfaceSVGPaint">Interface SVGPaint</h3>