mdgriffith / elm-style-animation

The style animation library for Elm!
http://package.elm-lang.org/packages/mdgriffith/elm-style-animation/latest
BSD 3-Clause "New" or "Revised" License
440 stars 40 forks source link

SVG height and width attributes #27

Closed marick closed 7 years ago

marick commented 8 years ago

I'm animating SVG rect elements to show fluid levels decreasing. rect uses height and width attributes. Those aren't animatable via the API. I realize I could use points instead of rect, but these attributes might be broadly useful. (Alternately, perhaps a way to set custom SVG attributes, though the case statement in the code suggests that isn't straightforward.)

Interestingly, you can use the HTML height attribute, which results in an element like this:

<rect style="height: 0px;" y="90" fill="#d3d7cf" x="0" width="30"></rect>

That actually works in both Chrome and Safari, but not in Firefox.

mdgriffith commented 7 years ago

Hey! Sorry, long time in responding :/

You can do this if you use Animation.attr "height" 0 "px", which manually specifies something that should render as an attribute instead of a style property.

I've put this on the list of things I'm looking at (rendering Animation.height as both a property and a style attribute) when I work on the next major revision.

Thanks!