1268720 - Some SVG attributes have no correlating CSS property

Status: RESOLVED DUPLICATE of bug 1383650

(Core :: SVG, defect)

Description

[mbaker]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:46.0) Gecko/20100101 Firefox/46.0
Build ID: 20160421124000

Steps to reproduce:

<svg>
  <style>
    circle {
      r: 25
    }
  </style>
  <circle cx="50" cy="50" r="45" />
</svg>


Actual results:

console warns:
Unknown property 'r'.  Declaration dropped.


Expected results:

Circle should have 25 radius (cascading style overrides attribute), no warning.

http://codepen.io/Kohesion/pen/KzGQQR

Comment 1

[Robert Longson [:longsonr]]

In SVG 1.1 r is an attribute and not a CSS property.

The idea that r is a CSS property is new in the unfinished SVG 2 specification. Firefox has not implemented this part of SVG 2 yet.

Comment 2

[mbaker]

Yes,

Unfortunately Chrome and Safari have implemented this while Chrome has deprecated SMIL animation.

Until Firefox/Mozilla catches up to the other class A vendors, there will be no unified, cross-platform way to animate SVG without resorting to javascript.

Comment 3

[Robert Longson [:longsonr]]

Sure there is, it's called SMIL. Chrome has merely deprecated their in browser implementation but that's no problem because you can use this https://github.com/ericwilligers/svg-animation to add it back in.

In the medium term the cross-platform way will be web animations which is being worked on by many UA vendors.