Re: CSS Animations Targeting SVG attributes

On Tue, Mar 15, 2011 at 1:17 PM, Robert O'Callahan <robert@ocallahan.org> wrote:
> Thanks for doing that! A few corrections of the top of my head:
>
> You seem to be missing x/y/width/height for 'rect'.
> x/y for tref/tspan also apply to 'text'.

I collapsed any attributes which did basically the same thing.  I
didn't go to the effort of collapsing the lists of elements together,
which can make it look a little weird ('width' is an attribute on
*way* more than just <foreignObject>, frex).


> dx/dy for 'text' are actually a length-list.

Ah, indeed.  I'll correct that.


> A few observations:
>
> width/height on foreignObject and rect should be uncontroversial to map to
> CSS width/height.
> It looks like the biggest problem with attribute name overloading is just
> x/y for tref/tspan/text vs rect/foreignObject. That's encouraging.
> It looks like very few of these map cleanly onto existing CSS properties.
> There's 'transform', plus we could let x/y for rect and foreignObject map to
> top/left maybe (that would deal with the overloading problem for those
> attributes), and we could let rx/ry on rect map to border-radius maybe. I
> don't see any other obvious mappings. That's less encouraging.

You arrived at the same conclusion as I did - we can probably map,
without too much controversy, the width, height, and transform
attributes directly, the x and y attributes on everything that's not
<text> related to left/top, and rx/ry on <rect> to border-radius.  The
rest either aren't mappable yet, or would be too complex/magical to
map (like cx/cy/r* on <circle> and <ellipse>, as I suggested earlier
in this thread).

That leaves us with 28 normal attributes, and 9 *Units attributes (I
added them back in now).  Several of those 28 can be collapsed - for
example, r/rx/ry from <circle> and <ellipse> could probably all be
mapped to a single property that took 1 or 2 values.

The d and points attributes can probably map to the similar properties
we'll define for CSS Shaping or whatever (defining non-rectangular
inner/outer shapes for boxes).

Since we're omitting the <filter>-related attributes due to CSS
Filters, perhaps we could omit the gradient-related attributes due to
CSS Gradients?  CSS and SVG gradients have a trivial mapping, albeit
not one that can be expressed directly in CSS.

Taking these suggestions would let us introduce less than 20 new
properties, total.

~TJ

Received on Tuesday, 15 March 2011 21:39:06 UTC