[animations] Missing Support for SVG-related Animations

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

The Angular documentation states:

Since Angular’s animation support builds on top of Web Animations, you can animate any property that the browser considers animatable. This includes positions, sizes, transforms, colors, borders, and many others. The W3C maintains a list of animatable properties on its CSS Transitions page.

These animatable properties include svg properties as per this subsection 7.2. A typical example would be the radius r of a <svg:circle> element.

Currently, the API for animations only supports a style(...) property, which does not fully allow the animation of to be supported svg properties.

Specifically, using the illustrative example component below, the animation will be performed in Chrome. It will, however, fail in Firefox (and Edge). I.e. the end state will be immediately jumped to.

Expected behavior

Full support for all animatable svg properties in Angular on par with CSS style animation. This could possibly involve adding a attribute(...) syntax as a complement to style(...) or expanding the supported use of the latter.

For added clarity, support for svg related animations should be a first class citizen in animation e.g. when addressing issues such as #9668 or any other means to creating dynamic animations.

Thanks in advance!!!

Minimal reproduction of the problem with instructions

The somewhat minimalistic component below allows reproduction.

import { Component } from '@angular/core';

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

@Component({
  selector: 'app-root',
  template: `
    <svg width=100 height=100>
      <circle
        [@resize]
        cx=50
        cy=50
        r=20
      >
      </circle>
    </svg>
  `,
  styles: ['circle {stroke: slateblue; fill: slateblue;}'],
  animations: [
    trigger(
      'resize', [
        transition(
          'void => *', [
            style({ r: 0 }),
            animate(2000)
          ])
      ]

    )
  ]
})
export class AppComponent {

}

What is the motivation / use case for changing the behavior?

The primary use case are complex data visualizations using svg with animated changes in response to data changes.

Without adding in consistent support for svg related animations, it is necessary to utilize additional third party modules (e.g. d3-selection and d3-transition) to touch the DOM.

With full support for animations, D3 can be used to compute layout data, but as a segregated concern Angular can handle all DOM updates.

Please tell us about your environment:

Windows 10 VS Code 1.11.2 npm 3.10.10

• Angular version: Angular 4.1.0

• Browser: [| Chrome Version 57.0.2987.133 (64-bit) | Firefox 53.0 | MS Edge 40.15063.0.0 EdgeHTML 15.15063]

• Language: [all]

• Node (for AoT issues): n/a

[tomwanzek]

Is there any update on this issue?

[tomwanzek]

@matsko Ping? This issue was opened in April and has not even seen any preliminary guidance/assessment from the core Angular Team. Unfortunate…

cc @vicb