Repository: angular
Issue: [animations] Missing Support for SVG-related Animations
Labels: feature,area: animations,freq1: low,P4,feature: under consideration,feature: votes required

**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](https://angular.io/docs/ts/latest/guide/animations.html) 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](https://www.w3.org/TR/css3-transitions/#animatable-properties). 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.

```ts
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