Add 'context-fill' and 'context-stroke' paint values.
--- a/master/changes.html Thu Jan 17 12:25:16 2013 +1100
+++ b/master/changes.html Thu Jan 17 17:35:32 2013 +1100
@@ -121,6 +121,9 @@
<li>Added <a>SVGMarkerList</a> and <a>SVGMarkerInstance</a> interfaces to represent the
markers painted on a given <a>markable element</a>, and an <a>SVGMarkableElement</a>
interface to expose that list on <a>markable elements</a>.</li>
+
+ <li>Added the <span class="prop-value">context-fill</span> and <span class="prop-value">context-stroke</span>
+ paint values.</li>
</ul>
<h3 id="color">Color chapter</h3>
--- a/master/definitions.xml Thu Jan 17 12:25:16 2013 +1100
+++ b/master/definitions.xml Thu Jan 17 17:35:32 2013 +1100
@@ -1162,6 +1162,7 @@
<symbol name='coordinate' href='types.html#DataTypeCoordinate'/>
<symbol name='dasharray' href='painting.html#DataTypeDasharray'/>
<symbol name='frequency' href='types.html#DataTypeFrequency'/>
+ <symbol name='gradient' href='types.html#DataTypeGradient'/>
<symbol name='icccolor' href='types.html#DataTypeICCColor'/>
<symbol name='image' href='types.html#DataTypeImage'/>
<symbol name='integer' href='types.html#DataTypeInteger'/>
@@ -1259,8 +1260,8 @@
<term name='current SVG document fragment' href='intro.html#TermCurrentSVGDocumentFragment'/>
<term name='CTM' href='intro.html#TermCTM'/>
<term name='current transformation matrix' href='intro.html#TermCurrentTransformationMatrix'/>
- <term name='decorated bounding box'
- href='intro.html#TermDecoratedBoundingBox'/>
+ <term name='context element' href='intro.html#TermContextElement'/>
+ <term name='decorated bounding box' href='intro.html#TermDecoratedBoundingBox'/>
<term name='font' href='intro.html#TermFont'/>
<term name='glyph' href='intro.html#TermGlyph'/>
<term name='glyphs' href='intro.html#TermGlyph'/>
--- a/master/images/painting/marker.svg Thu Jan 17 12:25:16 2013 +1100
+++ b/master/images/painting/marker.svg Thu Jan 17 17:35:32 2013 +1100
@@ -1,16 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg"
- width="400" height="200" viewBox="0 0 400 200">
+ width="275" height="200" viewBox="0 0 275 200">
<defs>
- <marker id="Triangle"
- viewBox="0 0 10 10" refX="1" refY="5"
- markerUnits="strokeWidth"
- markerWidth="4" markerHeight="3"
+ <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
+ markerUnits="strokeWidth" markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z"/>
</marker>
</defs>
- <path d="M 100 75 L 200 75 L 250 125"
- fill="none" stroke="black" stroke-width="10"
- marker-end="url(#Triangle)"/>
+ <g fill="none" stroke-width="10" marker-end="url(#Triangle)">
+ <path stroke="crimson" d="M 100,75 C 125,50 150,50 175,75"/>
+ <path stroke="olivedrab" d="M 175,125 C 150,150 125,150 100,125"/>
+ </g>
</svg>
--- a/master/intro.html Thu Jan 17 12:25:16 2013 +1100
+++ b/master/intro.html Thu Jan 17 17:35:32 2013 +1100
@@ -288,6 +288,25 @@
for details. The conditional processing attributes defined in
SVG 1.1 are <edit:attributecategory name='conditional processing'/>.</dd>
+ <div class="ready-for-wg-review">
+ <dt id="TermContextElement">context element</dt>
+ <dd>The context element of an element is defined as follows:
+ <ul>
+ <li>If the element is within a <a>'marker element'</a>, and
+ is being rendered as part of that marker due to being referenced
+ via a <a>marker property</a> or with the <a>'marker/href'</a>
+ attribute of a <a>positioned marker</a>, then the context element
+ is the element referencing that <a>'marker element'</a>.</li>
+ <li>If the element is within a sub-tree that is instantiated
+ with a <a>'use'</a> element, then the context element is
+ the that <a>'use'</a> element.</li>
+ <li>Otherwise, there is no context element.</li>
+ </ul>
+ <p class="issue">Should <a>gradient elements</a> also be
+ context elements?</p>
+ </dd>
+ </div>
+
<dt id="TermCoreAttribute">core attributes</dt>
<dd>The core attributes are those attributes that can be specified
on any SVG element. See <a href="struct.html#CommonAttributes">Common attributes</a>.
--- a/master/painting.html Thu Jan 17 12:25:16 2013 +1100
+++ b/master/painting.html Thu Jan 17 17:35:32 2013 +1100
@@ -17,33 +17,45 @@
<h1>Painting: Filling, Stroking and Marker Symbols</h1>
+<div class="ready-for-wg-review">
<h2 id="Introduction">Introduction</h2>
-<p><a>'path'</a> elements, <a>'text'</a> elements and <a href="shapes.html">basic shapes</a> can be
-<strong>filled</strong> (which means painting the interior of
-the object) and <strong>stroked</strong> (which means painting
-along the outline of the object). Filling and stroking both can
-be thought of in more general terms as
-<strong>painting</strong> operations.</p>
-
-<p>Certain elements (i.e., <a>'path'</a>, <a>'polyline'</a>, <a>'polygon'</a>
-and <a>'line'</a> elements) can also have
-<a href="painting.html#Markers">marker symbols</a> drawn at their vertices.</p>
-
-<p>With SVG, you can paint (i.e., fill or stroke) with:</p>
+<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 or radial)</li>
- <li>a pattern (vector or image, possibly tiled)</li>
- <li>custom paints available via <a href="extend.html">extensibility</a></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>
</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
+canvas. The <a href='#FillProperties'>Fill properties</a> and <a href='#StrokeProperties'>Stroke properties</a>
+sections below describe these properties.</p>
+
+<p>Certain elements – <a>'path'</a>, <a>'polyline'</a>, <a>'polygon'</a>
+and <a>'line'</a> elements – can also have <strong>marker symbols</strong>
+drawn at their vertices or at other positions along the path that
+they describe. The <a href='#Markers'>Markers</a> section below describes
+how markers can be defined and used.</p>
+
+<!--
<p>SVG uses the general notion of a <strong>paint server</strong>. Paint
servers are specified using a <a href="linking.html#IRIReference">IRI reference</a>
on a <a>'fill'</a> or <a>'stroke'</a> property.
<a href="pservers.html">Gradients and patterns</a> are just specific types of
paint servers.</p>
+-->
<h2 id="SpecifyingPaint">Specifying paint</h2>
@@ -68,102 +80,79 @@
</table>
</div>
-<p class="issue">Gecko supports values with slightly different names – -moz-objectFill, -moz-objectFillOpacity,
--moz-objectValue (for stroke width), etc. – so we might want to use those names instead.</p>
-
-<p>Properties <a>'fill'</a> and <a>'stroke'</a> take on a value of type
-<span class="prop-value"><paint></span>, which is specified as follows:</p>
-
- <table>
- <tr>
- <td><span
- class="property"><paint></span>: </td>
- <td><span class="prop-value">none |<br />
- currentColor |<br />
- <a href="types.html#DataTypeGradient"><gradient></a> |<br />
- <a href="types.html#DataTypeColor"><color></a>
- [<a href="types.html#DataTypeICCColor"><icccolor></a>] |<br />
- <a href="types.html#DataTypeFuncIRI"><funciri></a> [ none | currentColor | <a href="types.html#DataTypeColor"><color></a>
- [<a href="types.html#DataTypeICCColor"><icccolor></a>] ] |<br />
- <a class="noxref"
- href="http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#value-def-inherit">
- <span
- class="value-inst-inherit noxref">inherit</span></a></span></td>
- </tr>
- </table>
+<p>Properties <a>'fill'</a> and <a>'stroke'</a> take on a value of type <a><paint></a>:</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/>
+ [ <a><funciri></a> [ none | <a><color></a> | [ <a><color></a>? <a><icccolor></a> ] ]? ] |<br/>
+ context-fill |<br/>
+ context-stroke
+ </div>
+</div>
+
+<p>Values have the following meaning:</p>
<dl>
<dt>none</dt>
<dd>Indicates that no paint is applied.</dd>
- <dt>currentColor</dt>
- <dd>Indicates that painting is done using the current animated value of the color specified
- by the <a>'color'</a> property. This
- mechanism is provided to facilitate sharing of color
- attributes between parent grammars such as other (non-SVG)
- XML. This mechanism allows you to define a style in your HTML
- which sets the <span class='property'>'color'</span> property and then pass that style to
- the SVG user agent so that your SVG text will draw in the
- same color.</dd>
-
- <dt><strong><a href="types.html#DataTypeGradient"><gradient></a></strong></dt>
- <dd><a href="types.html#DataTypeGradient"><gradient></a> is a CSS gradient that can be
- set as a paint server. Percentage values
- get resolved against the bounding box of the element to which the gradient is applied.</dd>
-
- <dt><strong><color> [<icccolor>]</strong></dt>
- <dd><a href="types.html#DataTypeColor"><color></a> is
- the explicit color (in the sRGB color space [<a href='refs.html#ref-SRGB'>SRGB</a>])
- to be used to paint the current object. SVG supports all of
- the syntax alternatives for <color>
- <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-color">defined in CSS 2.1</a>
- ([<a href="refs.html#ref-CSS21">CSS21</a>], section 4.3.6), with the
- exception that SVG contains an expanded list of <a
- href="types.html#ColorKeywords">recognized color keywords
- names</a>. If an optional ICC color specification [<a href='refs.html#ref-ICC42'>ICC42</a>] is
- provided, then the user agent searches the color profile
- description database for a <a
- href="color.html#ColorProfileDescriptions">color profile
- description</a> entry whose name descriptor matches
- the <author-ident> part of the <a href="types.html#DataTypeICCColor"><icccolor></a>
- and uses the last matching entry that is found.
- (If no match is found, then the ICC color specification is
- ignored.) The comma and/or whitespace separated list
- of <a href="types.html#DataTypeNumber"><number></a>s
- is a set of ICC-profile-specific color values.
- (In most cases, the <a href="types.html#DataTypeNumber"><number></a>s will
- be in the range 0 to 1.) On platforms which support ICC-based
- color management, the <a href="types.html#DataTypeICCColor"><icccolor></a> gets
- precedence over the <a href="types.html#DataTypeColor"><color></a> (which is in the sRGB color
- space). Note that color interpolation occurs in an RGB color
- space even if an ICC-based color specification is provided
- (see <a>'color-interpolation'</a>).
+ <dt><color></dt>
+ <dd>A solid color as <a href="http://www.w3.org/TR/css3-color/#colorunits">defined in <cite>CSS Color Module Level 3</cite></a>.
+ [<a href="refs.html#ref-CSS3COLOR">CSS3COLOR</a>] All forms of <color>
+ defined by that specification are valid for use as a <a><paint></a>
+ value. This includes the basic color keywords,
+ RGB & RGBA color values, the <span class="prop-value">transparent</span>
+ value, HSL & HSLA color values, the extended color keywords,
+ the <span class="prop-value">currentColor</span> value,
+ and the CSS2 UI colors. Note that when <span class='prop-value'>currentColor</span>
+ is used, it refers to the current animated value of the <a>'color'</a> property.</dd>
+
+ <dt><a href="types.html#DataTypeGradient"><gradient></a></dt>
+ <dd>A CSS gradient value as <a href="http://www.w3.org/TR/css3-images/#gradients">defined in
+ <cite>CSS Image Values and Replaced Content Module Level 3</cite></a>. Percentage values
+ are resolved against the bounding box of the element to which the gradient is applied.</dd>
+
+ <dt><color>? <icccolor></dt>
+ <dd>An ICC color [<a href='refs.html#ref-ICC42'>ICC42</a>] with an optional sRGB fallback color if the ICC color cannot
+ be used. The user agent searches the color profile description
+ database for a <a href="color.html#ColorProfileDescriptions">color profile description</a>
+ entry whose name descriptor matches the <author-ident> part of the
+ <a><icccolor></a> and uses the last matching entry that is found.
+ If no match is found, then the sRGB fallback color is used instead,
+ if provided; otherwise the document is in error
+ (see <a href="implnote.html#ErrorProcessing">Error processing</a>).
+ The comma and/or whitespace separated list of <a><number></a>s
+ within the <a><icccolor></a> is a set of ICC-profile-specific color values.
+ (In most cases, the <a><number></a>s will be in the range 0 to 1.)
+ Note that color interpolation occurs in an RGB color space even if an
+ ICC-based color specification is provided (see <a>'color-interpolation'</a>).
For more on ICC-based colors, refer to <a
href="color.html#ColorProfileDescriptions">Color profile
descriptions</a>.</dd>
- <dt><strong><a href="types.html#DataTypeFuncIRI"><funciri></a><br />
- [ none |<br />
- currentColor |<br />
- <color>
- [<icccolor>] ]</strong></dt>
- <dd><a href="types.html#DataTypeFuncIRI"><funciri></a> is used to identify a <a
- href="pservers.html">paint server</a> such as a gradient, a
- pattern or a custom paint defined by an extension (see <a
- href="extend.html">Extensibility</a>). The <funciri>
- points to the paint server (e.g., a <a
- href="pservers.html#Gradients">gradient</a> or <a
- href="pservers.html#Patterns">pattern</a>) to be
- used to paint the current object. If the <a
- href="linking.html#IRIReference">IRI reference</a>
- is not valid (e.g., it points to an object that doesn't exist
- or the object is not a valid paint server), then the paint
- method following the <funciri> (i.e., <span class='prop-value'>none |
- currentColor | <color> [<icccolor>]</span>
- is used if provided; otherwise, the document is in error (see
- <a href="implnote.html#ErrorProcessing">Error
- processing</a>).</dd>
+ <dt><a><funciri></a> [ none | <a><color></a> | [ <a><color></a>? <a><icccolor></a> ] ]?</dt>
+ <dd>A reference to a <a href="pservers.html">paint server</a> element with an optional
+ fallback color or <span class="prop-value">none</span>.
+ The <a><funciri></a> is used to identify a <a>'solidColor'</a> element,
+ <a>gradient element</a> or <a>'pattern'</a> element,
+ which defines the paint to use. If the <a>IRI reference</a>
+ is not valid (e.g., it points to an element that does not exist
+ or the element is not a valid paint server), then the fallback
+ value is used, if provided; otherwise, the document is in error
+ (see <a href="implnote.html#ErrorProcessing">Error processing</a>).</dd>
+
+ <dt>context-fill</dt>
+ <dt>context-stroke</dt>
+ <dd>The computed value of the <a>'fill'</a> or <a>'stroke'</a>
+ property, respectively, of the <a>context element</a>. If there
+ is no context element, then no paint is applied.</dd>
</dl>
+</div>
<div class="ready-for-wider-review">
<h2 id="FillProperties">Fill properties</h2>
@@ -2082,10 +2071,11 @@
<p><a href="styling.html#SVGStylingProperties">Properties</a> inherit into the
<a>'marker element'</a> element from its ancestors; properties do <em>not</em>
-inherit from the element referencing the <a>'marker element'</a> element.</p>
-
-<p class="issue">Mention the new paint keywords that allow referencing
-object fill/stroke, etc.</p>
+inherit from the element referencing the <a>'marker element'</a> element.
+<span class="ready-for-wg-review">Note however that by using the <span class="prop-value">context-stroke</span>
+value for the <a>'fill'</a> or <a>'stroke'</a> on elements in its definition,
+a single marker can be designed to match the style of the element referencing
+the marker.</span></p>
<p><a>'marker element'</a> elements are only rendered directly
when they are used as children of a <a>markable element</a>
@@ -2233,19 +2223,23 @@
<p class="note">Note that <a>'marker-start'</a> and <a>'marker-end'</a>
refer to the first and last vertex of the entire path, not each subpath.</p>
+<div class="ready-for-wg-review">
<div class="example">
<p>The following example shows a triangular marker symbol used as a
- <a>vertex marker</a> to form an arrowhead at the end of a path.</p>
+ <a>vertex marker</a> to form an arrowhead at the end of two paths.</p>
<edit:includefile href='images/painting/marker.svg'/>
<div class="figure">
- <img class="bordered" src="images/painting/marker.svg"
+ <img class="bordered" src="images/painting/marker-rendering.svg"
alt="Image showing the use of an automatically oriented marker."/>
<p class="caption">The triangle is placed at the end of the path and
- oriented automatically so that it points in the right direction.</p>
+ oriented automatically so that it points in the right direction.
+ The use of <span class="prop-value">context-stroke</span> ensures
+ the fill of the triangle matches the stroke of each <a>'path'</a>.</p>
</div>
</div>
+</div>
<h3 id="SegmentMarkers">Segment markers: the <span class="property">'marker-segment'</span>
property</h3>
--- a/master/style/default_svg.css Thu Jan 17 12:25:16 2013 +1100
+++ b/master/style/default_svg.css Thu Jan 17 17:35:32 2013 +1100
@@ -273,6 +273,16 @@
.ready-for-wg-review > h3,
.ready-for-wg-review {
background-color: #FBFBB6 ! important;
+}
+
+body.ready-for-wg-review,
+h1.ready-for-wg-review,
+h2.ready-for-wg-review,
+h3.ready-for-wg-review,
+.ready-for-wg-review > h1,
+.ready-for-wg-review > h2,
+.ready-for-wg-review > h3,
+div.ready-for-wg-review {
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
@@ -292,6 +302,20 @@
.ready-for-wider-review > h3,
.ready-for-wider-review {
background-color: white ! important;
+}
+
+.chapter-index,
+.chapter-index h1,
+.chapter-index h2,
+.chapter-index h3,
+body.ready-for-wider-review,
+h1.ready-for-wider-review,
+h2.ready-for-wider-review,
+h3.ready-for-wider-review,
+.ready-for-wider-review > h1,
+.ready-for-wider-review > h2,
+.ready-for-wider-review > h3,
+div.ready-for-wider-review {
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;