--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/painting/multiple_paints.svg Mon Jun 24 11:31:20 2013 +0200
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="600"
+ height="150">
+ <defs>
+ <!--
+ <hatch
+ id="Hatch1"
+ rotate="45"
+ pitch="10">
+ <hatchPath stroke-width="2" stroke="black"/>
+ </hatch>
+ -->
+ <pattern
+ id="Hatch1"
+ patternUnits="userSpaceOnUse"
+ patternTransform="rotate(45)"
+ width="10"
+ height="300">
+ <path
+ stroke="black"
+ stroke-width="2"
+ d="M 1,0 1,300" />
+ </pattern>
+ <pattern
+ id="Hatch2"
+ patternTransform="rotate(-45)"
+ xlink:href="#Hatch1" />
+ </defs>
+ <g stroke="black"
+ stroke-width="2">
+ <rect
+ fill="url(#Hatch1)"
+ x="25"
+ y="25"
+ width="100"
+ height="100" />
+ <rect
+ fill="url(#Hatch2)"
+ x="175"
+ y="25"
+ height="100"
+ width="100" />
+ <rect
+ fill="powderblue"
+ x="325"
+ y="25"
+ width="100"
+ height="100" />
+ <rect
+ fill="powderblue"
+ x="475"
+ y="25"
+ width="100"
+ height="100" />
+ <rect
+ fill="url(#Hatch1)"
+ x="475"
+ y="25"
+ width="100"
+ height="100" />
+ <rect
+ fill="url(#Hatch2)"
+ x="475"
+ y="25"
+ width="100"
+ height="100" />
+ <!--
+ <rect
+ fill="url(#Hatch1), url(#Hatch2), powderblue"
+ x="475"
+ y="25"
+ width="100"
+ height="100" />
+ -->
+ </g>
+</svg>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/painting/multiple_paints2.svg Mon Jun 24 11:31:20 2013 +0200
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="300"
+ height="150">
+ <defs>
+ <!--
+ <hatch
+ id="Hatch1"
+ rotate="45"
+ pitch="10">
+ <hatchPath stroke-width="2" stroke="black"/>
+ </hatch>
+ -->
+ <pattern
+ id="Hatch1"
+ patternUnits="userSpaceOnUse"
+ patternTransform="rotate(45)"
+ width="10"
+ height="300">
+ <path
+ stroke="black"
+ stroke-width="2"
+ d="M 1,0 1,300" />
+ </pattern>
+ <pattern
+ id="Hatch2"
+ patternTransform="rotate(-45)"
+ xlink:href="#Hatch1" />
+ </defs>
+ <g stroke="black"
+ stroke-width="2">
+ <rect
+ fill="url(#Hatch1)"
+ x="25"
+ y="25"
+ width="100"
+ height="100" />
+ <rect
+ fill="url(#Hatch2)"
+ x="25"
+ y="25"
+ height="100"
+ width="100" />
+ <rect
+ fill="powderblue"
+ x="175"
+ y="25"
+ width="100"
+ height="100" />
+ <rect
+ fill="url(#Hatch1)"
+ x="175"
+ y="25"
+ width="100"
+ height="100" />
+ <!--
+ <rect
+ fill="url(#Hatch1), url(#Hatch2), powderblue"
+ x="475"
+ y="25"
+ width="100"
+ height="100" />
+ -->
+ </g>
+</svg>
--- a/master/painting.html Wed Jun 19 15:32:32 2013 +0200
+++ b/master/painting.html Mon Jun 24 11:31:20 2013 +0200
@@ -28,10 +28,11 @@
different paints that the fill and stroke of a graphical element can be painted with:</p>
<ul>
- <li>a single color</li>
- <li>a gradient (linear, radial or mesh)</li>
- <li>a pattern (vector or raster, possibly tiled)</li>
- <li>other images as specified using CSS Image Value syntax [<a href="refs.html#ref-CSS3IMAGES">CSS3IMAGES</a>]</li>
+ <li>a single color,</li>
+ <li>a gradient (linear, radial, or mesh),</li>
+ <li>a pattern (vector or raster, possibly tiled),</li>
+ <li>a hatch,</li>
+ <li>other images as specified using CSS Image Value syntax [<a href="refs.html#ref-CSS3IMAGES">CSS3IMAGES</a>].</li>
</ul>
<p>The paint to use for filling and stroking an element is specified using the
@@ -80,7 +81,59 @@
</table>
</div>
-<p>Properties <a>'fill'</a> and <a>'stroke'</a> take on a value of type <a><paint></a>:</p>
+<div class="annotation svg2-requirement">
+ <table>
+ <tr>
+ <th>SVG 2 Addition:</th>
+ <td>Allow multiple paints in fill and stroke.</td>
+ </tr>
+ <tr>
+ <th>Resolution:</th>
+ <td><a href="http://www.w3.org/2013/06/03-svg-minutes.html#item10">We will allow multiple paints in the fill and stroke properties in SVG 2.</a></td>
+ </tr>
+ <tr>
+ <th>Purpose:</th>
+ <td>Useful for creating cross hatchings, putting a partially transparent pattern on top of a solid fill, etc.</td>
+ </tr>
+ <tr>
+ <th>Owner:</th>
+ <td>Tav (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3500">ACTION-3500</a>)</td>
+ </tr>
+ </table>
+</div>
+
+<p>Properties <a>'fill'</a> and <a>'stroke'</a> take on a comma separated list of values of type <a><paint></a> with
+the last value optionally taking a space separated solid color fallback.</p>
+
+<p class="annotation">The paint order follows that of CSS backgrounds.</p>
+
+<div class="example">
+<pre><![CDATA[
+<rect width="100" height="100" fill="url(#MyHatch1, #MyHatch2, powderblue)">
+]]></pre>
+<div class="figure">
+ <img
+ alt="An example of applying three paints to a rectangle."
+ src="images/painting/multiple_paints.svg"/>
+ <p class="caption">The rightmost rectangle is filled by stacking the paints shown in the other rectangles.</p>
+</div>
+</div>
+
+<div class="example">
+<pre><![CDATA[
+<rect width="100" height="100" fill="url(#MyHatch1, #MyHatch2 powderblue)">
+]]></pre>
+<div class="figure">
+ <img
+ alt="An example with a fallback solid paint fill."
+ src="images/painting/multiple_paints2.svg"/>
+ <p class="caption">The left rectangle shows the expected fill if both MyHatch1 and MyHatch2 are defined. The right rectangle shows the expected fill if MyHatch1 is defined but MyHatch2 is missing.</p>
+</div>
+</div>
+
+
+
+<p>The type <a><paint></a> is defined as:</p>
<div class="definition">
<dfn id="DataTypePaint"><paint></dfn> =<br/>
--- a/master/pservers.html Wed Jun 19 15:32:32 2013 +0200
+++ b/master/pservers.html Mon Jun 24 11:31:20 2013 +0200
@@ -81,7 +81,7 @@
<p>
Paint servers are used by including an <a>IRI reference</a> in
- a <a>'fill'</a> or <a>'stroke'</a> property (i.e. fill="#MyLightPurple").
+ a <a>'fill'</a> or <a>'stroke'</a> property (i.e. fill="url(#MyLightPurple)").
</p>
<p>