W3C home > Mailing lists > Public > public-svg-wg@w3.org > July to September 2014

svg2: Introduce new layout CSS properties x, y, cx, cy, r, rx, ry.

From: SVG Working Group repository <cam+svgwgrepo@mcc.id.au>
Date: Thu, 24 Jul 2014 09:42:58 -0700
Message-Id: <hg.92ca1fecaf87.1406220178.3034738116371802840@ps58493.dreamhostps.com>
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>&lt;length&gt;</a> | <a>&lt;percentage&gt;</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>&lt;length&gt;</a> | <a>&lt;percentage&gt;</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>&lt;length&gt;</a> | <a>&lt;percentage&gt;</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>&lt;length&gt;</a> | <a>&lt;percentage&gt;</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>&lt;length&gt;</a> | <a>&lt;percentage&gt;</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>&lt;length&gt;</a> | <a>&lt;percentage&gt;</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>&lt;length&gt;</a> | <a>&lt;percentage&gt;</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

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 21:20:19 UTC