Re: Animating SVG with CSS

Thanks, I'll see toward looking at the spec.

E-S4L
N-S4L
J-S4L

> On Sep 17, 2014, at 4:38 AM, "Dirk Schulze" <dschulze@adobe.com> wrote:
> 
> 
>> On Sep 17, 2014, at 9:30 AM, L2L 2L <emanuelallen@hotmail.com> wrote:
>> 
>> 
>> 
>>> On Sep 17, 2014, at 2:59 AM, "Dirk Schulze" <dschulze@adobe.com> wrote:
>>> 
>>> 
>>>> On Sep 17, 2014, at 5:19 AM, L2L 2L <emanuelallen@hotmail.com> wrote:
>>>> 
>>>> Can one use CSS to animate SVG?
>>> 
>>> Depends.
>> 
>> Interacting propose... Like games, but nothing to fancy. I tried moving an SVG rect element with CSS but it didn't work, I don't know if I'm doing something wrong.
> 
> There is the attr() CSS function to set attributes with CSS. I don’t know if this function is implemented in browsers today. Also, many SVG attributes are so called presentation attributes that can be set by CSS as well and contribute to the CSS property’s cascade. These properties are animatable as far as CSS Transitions and CSS Animations defines animations for them. A list of presentation attributes can be found in the SVG specification[1].
> 
> x and y are no presentation attributes in SVG 1.1. Even though they are presentation attributes in SVG2 now[2], there is a lack of implementations for the most part. (Just WebKit implements these as presentation attributes so far.)
> 
> Greetings,
> Dirk
> 
> [1] http://www.w3.org/TR/SVG/attindex.html#PresentationAttributes 
> [2] https://svgwg.org/svg2-draft/layout.html

> 
> 
>> 
>> I'm looking into canvas... It would be awesome if canvas his a getContext("svg");. Not so much it being vector, but just the interface of it.
>> 
>> E-S4L
>> N-S4L
>> J-S4L
>> 
>>> 
>>>> 
>>>> E-S4L
>>>> N-S4L
>>>> J-S4L
>

Received on Wednesday, 17 September 2014 17:16:09 UTC