[css-exclusions][css-masking] Animation of Basic Shapes

Hi,

CSS Masking allows animation of the 'clip-path' property[1]. This is an requirement from SVG which introduces this property.

CSS Masking also extends this property to use the Basic Shapes from CSS Exclusions[2]. I would like to have interpolation of basic shapes to be defined. This could be used for some neat effects on CSS Transitions. I would suggest wording like this in the spec:

Basic Shapes
===========

Shapes can be specified using syntax similar to SVGs basic shapes. The definitions use <length> and <percentage> types (see [CSS3VAL]). Host specifications referenceing basic shapes need to specify how percentage values are resolved. For the radius r of the circle shape, a percentage value is resolved as specified in the SVG recommendation (see [SVG11]). Path styling like stroking is not considered.

Supported Shapes
-------------------------

The following basic shapes are supported:

rectangle([<length>|<percentage>]{4} [ curve [<length>|<percentage>]{1,2} ]? )
		• The four values represent x, y, width and height. They define the bounding box of the rectangle. Negative values for width and height are invalid.
		• The two ‘curve’ values represent rx and ry. For rounded rectangles they define the x-axis radius and y-axis radius of the ellipse used to round off the corners of the rectangle. Negative values for rx and ry are invalid.
circle([<length>|<percentage>]{3})
		• The three values values represent cx, cy, and r. They define the x-axis and y-axis coordinates of the center of the circle and the radius of the circle. A negative value for r is invalid.
ellipse([<length>|<percentage>]{4})
		• The four values represent cx, cy, rx, and ry. They define the x-axis and y-axis coordinates of the center of the ellipse and the x-axis and y-axis radius of the ellipse. Negative values for rx and ry are invalid.
polygon([<fill-rule>,]? [<length>|<percentage>]{2}#)
		• fill-rule - The filling rule used to determine the interior of the polygon. See ‘fill-rule’ property in SVG for details. Possible values are ‘nonzero’ or ‘evenodd’. Default value when omitted is nonzero.
		• The length/percentage pairs represent xi and yi - the x and y axis coordinates of the i-th vertex of the polygon. The UA will close a polygon by connecting the last vertex with the first vertex of the list.

Interpolation of basic shapes
---------------------------------------

If a host specification allows animations or transitions on basic shapes, the basic shapes must be interpolated. For interpolating between one basic shape and a second, the rules described below are applied.

	• If both basic shapes are of the same type and not of type polygon:
		• Interpolate between each value.
	• If one basic shape is of type rectangle and the second of type circle or ellipse:
		• Replace the circle/ellipse with a temporary rectangle of equal dimension.
		• Set the values for rx and ry on the temporary rectangle to ‘50%’.
		• Interpolate between the two rectangles as above.
	• If both basic shapes are of type polygon and if both polygons have the same number of vertices:
		• Interpolate between each value.
	• In all other cases:
		• No interpolation is specified.


Greetings,
Dirk


[1] http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html#the-clip-path
[2] http://dev.w3.org/csswg/css3-exclusions/#basic-shapes-from-svg-syntax

Received on Thursday, 8 November 2012 23:28:08 UTC