- From: SVG Working Group repository <cam+svgwgrepo@mcc.id.au>
- Date: Mon, 24 Jun 2013 02:34:40 -0700
- To: public-svg-wg@w3.org
details: https://svgwg.org/hg/svg2/rev/65bf3cf66926
branches:
changeset: 519:65bf3cf66926
user: tbah <tavmjong@free.fr>
date: Mon Jun 24 11:31:20 2013 +0200
description:
Add mulitple fills/strokes to SVG 2.
diffstat:
master/images/painting/multiple_paints.svg | 79 +++++++++++++++++++++++++++++
master/images/painting/multiple_paints2.svg | 67 ++++++++++++++++++++++++
master/painting.html | 63 +++++++++++++++++++++-
master/pservers.html | 2 +-
4 files changed, 205 insertions(+), 6 deletions(-)
diffs (278 lines):
diff --git a/master/images/painting/multiple_paints.svg b/master/images/painting/multiple_paints.svg
new file mode 100644
--- /dev/null
+++ b/master/images/painting/multiple_paints.svg
@@ -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>
diff --git a/master/images/painting/multiple_paints2.svg b/master/images/painting/multiple_paints2.svg
new file mode 100644
--- /dev/null
+++ b/master/images/painting/multiple_paints2.svg
@@ -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>
diff --git a/master/painting.html b/master/painting.html
--- a/master/painting.html
+++ b/master/painting.html
@@ -23,20 +23,21 @@
<p>Graphical elements that define a shape – <a>'path'</a> elements, <a>basic shapes</a>
and <a>text content elements</a> – are rendered by being <strong>filled</strong>,
which is painting the interior of the object, and <strong>stroked</strong>, which is
painting along the outline of the object. Filling and stroking are both
<strong>painting</strong> operations. SVG 2 supports a number of
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
<a>'fill'</a> and <a>'stroke'</a> properties. The following section describes
the different values that can be used for these properties.</p>
<p>Other properties, such as <a>'fill-opacity'</a> and <a>'stroke-width'</a>,
also have an effect on the way fill and stroke paint is applied to the
@@ -75,17 +76,69 @@ paint servers.</p>
</tr>
<tr>
<th>Owner:</th>
<td>Chris (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3094">ACTION-3094</a>)</td>
</tr>
</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/>
<div style="margin-left: 2em">
none |<br/>
<a><color></a> |<br/>
[ <a><color></a>? <a><icccolor></a> ] |<br/>
<a><gradient></a> |<br/>
diff --git a/master/pservers.html b/master/pservers.html
--- a/master/pservers.html
+++ b/master/pservers.html
@@ -76,17 +76,17 @@ redefine them here. -->
A solid color ("MyLightPurple").
A linear gradient.
A pattern.
</p>
</div>
<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>
<a href="styling.html#SVGStylingProperties">Properties</a> inherit
into a paintserver element from its ancestors;
properties do <em>not</em> inherit from the element referencing
the paintserver element.
</p>
Received on Monday, 24 June 2013 09:35:08 UTC