- From: SVG Working Group repository <cam+svgwgrepo@mcc.id.au>
- Date: Thu, 24 Jul 2014 09:42:58 -0700
- To: public-svg-wg@w3.org
details: https://svgwg.org/hg/svg2/rev/92ca1fecaf87
branches:
changeset: 689:92ca1fecaf87
user: Dirk Schulze <dschulze@adobe.com>
date: Thu Jul 24 18:40:20 2014 +0200
description:
Introduce new layout CSS properties x, y, cx, cy, r, rx, ry.
diffstat:
master/definitions.xml | 9 +-
master/layout.html | 382 +++++++++++++++++++++++++++++++++++++++++++++++++
master/publish.xml | 1 +
3 files changed, 391 insertions(+), 1 deletions(-)
diffs (454 lines):
diff --git a/master/definitions.xml b/master/definitions.xml
--- a/master/definitions.xml
+++ b/master/definitions.xml
@@ -787,17 +787,17 @@
name='style'>
<attribute name='class' href='styling.html#ClassAttribute' animatable='yes'/>
<attribute name='style' href='styling.html#StyleAttribute'/>
</attributecategory>
<attributecategory
name='presentation'
href='intro.html#TermPresentationAttribute'
- presentationattributes='alignment-baseline, baseline-shift, buffered-rendering, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, hanging-punctuation, hyphens, image-rendering, letter-spacing, lighting-color, line-break, line-height, marker-end, marker-mid, marker-pattern, marker-segment, marker-start, mask, opacity, overflow, overflow-wrap, paint-order, pointer-events, shape-inside, shape-margin, shape-padding, shape-rendering, shape-outside, solid-color, solid-opacity, stop-color, stop-opacity, stroke, stroke-dashadjust, stroke-dasharray, stroke-dashcorner, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opa
city, stroke-width, tab-size, text-align, text-anchor, text-decoration, text-indent, text-overflow, text-rendering, transform, unicode-bidi, vector-effect, visibility, white-space, word-break, word-spacing, word-wrap, writing-mode'/>
+ presentationattributes='alignment-baseline, baseline-shift, buffered-rendering, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, hanging-punctuation, hyphens, image-rendering, letter-spacing, lighting-color, line-break, line-height, marker-end, marker-mid, marker-pattern, marker-segment, marker-start, mask, opacity, overflow, overflow-wrap, paint-order, pointer-events, shape-inside, shape-margin, shape-padding, shape-rendering, shape-outside, solid-color, solid-opacity, stop-color, stop-opacity, stroke, stroke-dashadjust, stroke-dasharray, stroke-dashcorner, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opa
city, stroke-width, tab-size, text-align, text-anchor, text-decoration, text-indent, text-overflow, text-rendering, transform, unicode-bidi, vector-effect, visibility, white-space, word-break, word-spacing, word-wrap, writing-mode, x'/>
<attributecategory
name='document event'
href='intro.html#TermDocumentEventAttribute'>
<attribute name='onunload' href='script.html#OnUnloadEventAttribute'/>
<attribute name='onabort' href='script.html#OnAbortEventAttribute'/>
<attribute name='onerror' href='script.html#OnErrorEventAttribute'/>
<attribute name='onresize' href='script.html#OnResizeEventAttribute'/>
@@ -948,16 +948,23 @@
<property name='text-anchor' href='text.html#TextAnchorProperty'/>
<property name='text-decoration' href='text.html#TextDecorationProperty'/>
<property name='text-rendering' href='painting.html#TextRenderingProperty'/>
<property name='transform' href='coords.html#TransformProperty'/>
<property name='unicode-bidi' href='text.html#UnicodeBidiProperty'/>
<property name='vector-effect' href='painting.html#NonScalingStroke'/>
<property name='word-spacing' href='text.html#WordSpacingProperty'/>
<property name='writing-mode' href='text.html#WritingModeProperty'/>
+ <property name='x' href='layout.html#XProperty'/>
+ <property name='y' href='layout.html#YProperty'/>
+ <property name='cx' href='layout.html#CxProperty'/>
+ <property name='cy' href='layout.html#CyProperty'/>
+ <property name='r' href='layout.html#RProperty'/>
+ <property name='rx' href='layout.html#RxProperty'/>
+ <property name='ry' href='layout.html#RyProperty'/>
<!-- ... properties defined elsewhere but described in this spec ........ -->
<property name='display' href='painting.html#VisibilityControl'/>
<property name='opacity' href='masking.html#ObjectAndGroupOpacityProperties'/>
<property name='visibility' href='painting.html#VisibilityControl'/>
<property name='height' href='styling.html#HeightProperty'/>
<property name='width' href='styling.html#WidthProperty'/>
diff --git a/master/layout.html b/master/layout.html
new file mode 100644
--- /dev/null
+++ b/master/layout.html
@@ -0,0 +1,382 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Filter Effects</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" title="Default" type="text/css" media="screen" href="style/default_svg.css"/>
+ <link rel="alternate stylesheet" title="No issues/annotations" type="text/css" media="screen" href="style/default_no_issues.css"/>
+ <!--
+ <link rel="alternate stylesheet" title="CSS3 Unmodified" type="text/css" media="screen" href="style/default.css"/>
+ <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>SVG's layout properties</h1>
+
+<p>Beside SVG's styling properties, SVG also defines
+<dfn id='layout-properties'>layout properties</dfn>. Layout properties
+describe graphics elements position and dimension.</p>
+
+<h2>Horizontal center coordinate: The
+<span class="property">'cx'</span> property</h2>
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="CxProperty">cx</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a><length></a> | <a><percentage></a></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>0</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>'circle'</a>, <a>'ellipse'</a>, <a>'radialGradient'</a>
+ </td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>refer to the size of the current viewport (see
+ <a href="coords.html#Units">Units</a>)</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>as specified</td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
+
+<p>The <a>'cx'</a> property describes the horizontal center coordinate
+of the position of the element. For <a>'radialGradient'</a> it defines
+the horizontal center coordinate of the radial gradient.</p>
+
+<h2>Vertical center coordinate: The <span class="property">'cy'</span>
+property</h2>
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="CyProperty">cy</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a><length></a> | <a><percentage></a></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>0</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>'circle'</a>, <a>'ellipse'</a>, <a>'radialGradient'</a>
+ </td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>refer to the size of the current viewport (see
+ <a href="coords.html#Units">Units</a>)</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>as specified</td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
+
+<p>The <a>'cy'</a> property describes the vertical center coordinate
+of the position of the element. For <a>'radialGradient'</a> it defines
+the vertical center coordinate of the radial gradient.</p>
+
+<h2>Radius: The <span class="property">'r'</span> property</h2>
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="RProperty">r</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a><length></a> | <a><percentage></a></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>0</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>'circle'</a>, <a>'radialGradient'</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>refer to the size of the current viewport (see
+ <a href="coords.html#Units">Units</a>)</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>as specified</td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
+
+<p>The <a>'r'</a> property describes the radius of the <a>'circle'</a>
+element and the radius of the radial gradient of the
+<a>'radialGradient'</a> element. The radius must be bigger or equal
+to zero.</p>
+
+<h2>Horizontal radius: The <span class="property">'rx'</span>
+property</h2>
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="RxProperty">rx</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a><length></a> | <a><percentage></a></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>0</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>'ellipse'</a>, <a>'rect'</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>refer to the size of the current viewport (see
+ <a href="coords.html#Units">Units</a>)</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>as specified</td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
+
+<p>The <a>'rx'</a> property describes the horizontal radius of the
+<a>'ellipse'</a> element and the curve radius of the <a>'rect'</a>
+element. The horizontal radius must be bigger or equal to zero.</p>
+
+<h2>Vertical radius: The <span class="property">'ry'</span>
+property</h2>
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="RyProperty">ry</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a><length></a> | <a><percentage></a></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>0</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>'ellipse'</a>, <a>'rect'</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>refer to the size of the current viewport (see
+ <a href="coords.html#Units">Units</a>)</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>as specified</td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
+
+<p>The <a>'ry'</a> property describes the vertical radius of the
+<a>'ellipse'</a> element and the curve radius of the <a>'rect'</a>
+element. The vertical radius must be bigger or equal to zero.</p>
+
+<h2>Horizontal coordinate: The <span class="property">'x'</span> property</h2>
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="XProperty">x</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a><length></a> | <a><percentage></a></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>0</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>'pattern element'</a>, <a>'mask element'</a>,
+ <a>'filter element'</a>, <a>'svg'</a>, <a>'rect'</a>,
+ <a>'image'</a>, <a>'foreignObject'</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>refer to the size of the current viewport (see
+ <a href="coords.html#Units">Units</a>)</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>as specified</td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
+
+<p>The <a>'x'</a> property describes the horizontal coordinate of
+the position of the element.</p>
+
+<div class="issue">
+<p>In opposite to all other usage, the <a>'text'</a>
+element and the <a>'tspan'</a> element do have x and y
+attributes with length lists. So far, there are four proposals:</p>
+<ol>
+ <li>Make <a>'x'</a> accept a list of length|percentage values rather than a
+ single length|percentage value. For the elements <a>'pattern'</a>,
+ <a>'mask element'</a>, <a>'filter element'</a>, <a>'svg'</a>, <a>'rect'</a>,
+ <a>'image'</a>, <a>'foreignObject'</a> we would specify that all but the
+ first list item must be ignored.</li>
+ <li>Don't make <a>'x'</a> a presentation attribute for the
+ <a>'text'</a> element and the <a>'tspan'</a> element. We
+ had experience with that on the width and height attribute for
+ HTMLCanvas. The position of the two elements could not be set by the
+ CSS properties that apply every where else otherwise.</li>
+ <li>Introduce a value of 'auto' to <a>'x'</a>. For the <a>'text'</a>
+ element and the <a>'tspan'</a>: If the computed value of
+ the 'x' property is 'auto', take the value of the 'x' attribute.
+ Otherwise, let the <a>'x'</a> property override the value of the 'x'
+ attribute. For all other elements, <a>'x'</a> behaves like a normal
+ presentation attribute.</li>
+ <li>For the <a>'text'</a> element and the
+ <a>'tspan'</a>: Map the x and y attributes to different
+ CSS properties like 'text-x' and 'text-y'.</li>
+</ol>
+</div>
+
+<h2>Vertical coordinate: The <span class="property">'y'</span>
+property</h2>
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="YProperty">y</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a><length></a> | <a><percentage></a></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>0</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>'pattern element'</a>, <a>'mask element'</a>,
+ <a>'filter element'</a>, <a>'svg'</a>, <a>'rect'</a>,
+ <a>'image'</a>, <a>'foreignObject'</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>refer to the size of the current viewport (see
+ <a href="coords.html#Units">Units</a>)</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>as specified</td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
+
+<p>The <a>'y'</a> property describes the vertical coordinate of
+the position of the element.</p>
+
+<p class="issue">See issue for the <a>'x'</a> property.</p>
+
+<p class="issue">Consider turning more attributes to presentation
+attributes like <span class="property">'fx'</span>,
+<span class="property">'fy'</span>, <span class="property">'dx'</span>
+and <span class="property">'dy'</span>.</p>
+</body>
+</html>
diff --git a/master/publish.xml b/master/publish.xml
--- a/master/publish.xml
+++ b/master/publish.xml
@@ -46,16 +46,17 @@
<index name='Overview'/>
<page name='toc' toc="true"/>
<chapter name='intro'/>
<chapter name='concepts'/>
<chapter name='render'/>
<chapter name='types'/>
<chapter name='struct'/>
<chapter name='styling'/>
+ <chapter name='layout'/>
<chapter name='coords'/>
<chapter name='paths'/>
<chapter name='shapes'/>
<chapter name='text'/>
<chapter name='embedded'/>
<chapter name='painting'/>
<chapter name='color'/>
<chapter name='pservers'/>
Received on Thursday, 24 July 2014 16:43:23 UTC