- From: SVG Working Group repository <cam@mcc.id.au>
- Date: Wed, 16 Jan 2013 22:36:37 -0800
- To: public-svg-wg@w3.org
details: https://svgwg.org/hg/svg2/rev/6393e442859f branches: changeset: 419:6393e442859f user: Cameron McCormack <cam@mcc.id.au> date: Thu Jan 17 17:35:32 2013 +1100 description: Add 'context-fill' and 'context-stroke' paint values. diffstat: master/changes.html | 3 + master/definitions.xml | 5 +- master/images/painting/marker.svg | 15 +- master/intro.html | 19 +++ master/painting.html | 210 ++++++++++++++++++------------------- master/style/default_svg.css | 24 ++++ 6 files changed, 158 insertions(+), 118 deletions(-) diffs (505 lines): diff --git a/master/changes.html b/master/changes.html --- a/master/changes.html +++ b/master/changes.html @@ -116,16 +116,19 @@ have been made.</p> <li>Moved the <span class='property'>color-interpolation-filters</span> property to the Filter Effects specification.</li> <li>Added the <a>'buffered-rendering'</a> property.</li> <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> <ul> <li>Added requirements for images to be color managed.</li> <li>Added new color syntaxes from the SVG Color specification: RGBA colors, HSL colors, diff --git a/master/definitions.xml b/master/definitions.xml --- a/master/definitions.xml +++ b/master/definitions.xml @@ -1157,16 +1157,17 @@ <symbol name='align' href='coords.html#DataTypeAlign'/> <symbol name='angle' href='types.html#DataTypeAngle'/> <symbol name='anything' href='types.html#DataTypeAnything'/> <symbol name='color' href='types.html#DataTypeColor'/> <symbol name='child-selector' href='types.html#DataTypeChildSelector'/> <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'/> <symbol name='knockout-offset' href="painting.html#DataTypeKnockoutOffset"/> <symbol name='knockout-shape' href="painting.html#DataTypeKnockoutShape"/> <symbol name='length' href='types.html#DataTypeLength'/> <symbol name='list' href='types.html#DataTypeList'/> <symbol name='list-of-family-names' href='types.html#DataTypeListOfFamilyNames'/> @@ -1254,18 +1255,18 @@ <term name='non-local IRI reference' href='intro.html#TermNonLocalIRIReference'/> <term name='non-local IRI references' href='intro.html#TermNonLocalIRIReference'/> <!-- ... other, defined in intro.html ... --> <term name='bounding box' href='intro.html#TermBoundingBox'/> <term name='canvas' href='intro.html#TermCanvas'/> <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'/> <term name='hit-test' href='intro.html#TermHitTesting'/> <term name='hit-testing' href='intro.html#TermHitTesting'/> <term name='invalid' href='intro.html#TermInvalidValue'/> <term name='invalid value' href='intro.html#TermInvalidValue'/> <term name='lacuna value' href='intro.html#TermLacunaValue'/> diff --git a/master/images/painting/marker.svg b/master/images/painting/marker.svg --- a/master/images/painting/marker.svg +++ b/master/images/painting/marker.svg @@ -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> diff --git a/master/intro.html b/master/intro.html --- a/master/intro.html +++ b/master/intro.html @@ -283,16 +283,35 @@ element and attribute categories and the <dt id="TermConditionalProcessingAttribute">conditional processing attribute</dt> <dd>A conditional processing attribute is one that controls whether or not the element on which it appears is processed. Most elements, but not all, may have conditional processing attributes specified on them. See <a href="struct.html#ConditionalProcessing">Conditional processing</a> 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>. The core attributes are <edit:attributecategory name='core'/>.</dd> <dt id="TermCurrentInnermostSVGDocumentFragment"> current innermost SVG document fragment</dt> <dd>The XML document sub-tree which starts with the most immediate ancestor <a href="struct.html#SVGElement"><span diff --git a/master/painting.html b/master/painting.html --- a/master/painting.html +++ b/master/painting.html @@ -12,43 +12,55 @@ <link rel="alternate stylesheet" title="SVG 1.1" type="text/css" media="screen" href="style/svg-style.css"/> --> <!-- W3C style sheet will be added here during processing. --> </head> <body> <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> <div class="annotation svg2-requirement"> <table> <tr> <th>SVG 2 Requirement:</th> <td>Add new paint values for referencing current fill paint, stroke paint, etc.</td> @@ -63,112 +75,89 @@ 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 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> <h3 id="SpecifyingFillPaint">Specifying fill paint: the <span class="property">'fill'</span> property</h3> <table class="propdef"> <tr> @@ -2077,20 +2066,21 @@ width/height of the viewport.</p> the <a>'overflow'</a> property for <a>'marker element'</a> elements to <span class="prop-value">hidden</span>, which causes a rectangular clipping path to be created at the bounds of marker's viewport. Unless the <a>'overflow'</a> property is overridden, any graphics within the marker which goes outside of the marker's viewport will be clipped.</p> <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> and have a <a>'position'</a> attribute specified. This causes the marker to be painted as a <a>positioned marker</a>. All other <a>'marker element'</a> elements are not rendered directly and must be referenced by one of the <a>marker properties</a> to be rendered. The <a>'display'</a> property does not apply to the @@ -2228,29 +2218,33 @@ vertex, and for <a>'path'</a> elements t vertex is the same as the first vertex of that final subpath. In this case, if the value of <a>'marker-end'</a> is not <span class="prop-value">none</span>, then it is possible that two markers will be rendered on that final vertex.</p> <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> <table class="propdef"> <tr> <th>Name:</th> <td><dfn id="MarkerSegmentProperty">marker-segment</dfn></td> 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 @@ -268,16 +268,26 @@ 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, .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; padding-right: 16px; } .chapter-index, .chapter-index h1, @@ -287,16 +297,30 @@ 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, .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; padding-right: 16px; } .svg2-requirement table { border-collapse: collapse; width: 100% } .svg2-requirement table th { font-weight: normal; font-style: italic; padding-right: 1em; white-space: nowrap; width: 1px }
Received on Thursday, 17 January 2013 06:37:36 UTC