CSS Animations Targeting SVG attributes

I cannot attend today's conference call, so I'm reading the conclusions from 
http://www.w3.org/Graphics/SVG/WG/wiki/Talk:F2F/Auckland_2011/CSS_Animation

It seems that the SVG WG would like to propose option 3 to the FX TF.

I don't think this is a great solution, for two reasons:

1. You lose the ability to do transitions with style changes. Instead you have to run some script to update the DOM. In most cases I believe we should be encouraging authors to take a state-based approach via CSS when building documents. In other words, always try to represent changes in the document via a single change to a CSS class on an ancestor element. This is conceptually similar to what :hover does. Breaking this and requiring script for all updates seems brutal.

Obviously there isn't yet a solution for this, but option 2 was getting close.

2. It requires we change CSS parsing rules to allow attr(x) on the left side of a rule. While this is only inside @keyframes, I expect all implementations share the code here with the rest of their CSS parser.

Could we investigate option 2 a little more?

I haven't thought this through at all, but how about rather than prefixing attribute names with elements, we could come up with a generic global prefix that indicates the property is an attribute? eg. -attr-x is similar to attr(x), but would allow the identifier to appear on the left side without requiring a change in CSS parsing rules. Again, in uppercase this time, I HAVE NOT THOUGHT THIS THROUGH AND IT WILL NOT WORK! I'm just offering something for discussion.

One of the main reasons I dislike my suggestion is that it implies CSS is changing the structure of the document (if you consider attributes to be structure). You'd then have to decide what happens to style rules that are matching the structure you've just changed. This would be really ugly:

circle:hover {
 -attr-r: 10px;
}

circle[r=10] {
 -attr-r: 20px;
}

Here's another probably stupid and unlikely to work suggestion: allow selectors on SMIL elements. That way, a transition could be something like this:

<circle cx="100" cy="100" r="50">
  <set selector=":hover" attributeName="r" attributeValue="100" dur="1s"/>
</circle>

Lastly, you could still examine moving some of the SVG attributes to CSS properties (at least the ones that are presentational, such as radius, width, height, etc) but prefix them with -svg-.

Anyway, my point is that I'm not a fan of option 3, and I think there are other alternatives we could examine. I'm sure the broader audience can come up with much better solutions than I'm spitballing.

Dean

Received on Monday, 14 March 2011 18:48:19 UTC