Which SVG properties can be manipulated using CSS(3)?

Question

I just finished a project that used Raphael.js for svg manipulations. I found that using JS for all style, hover, etc manipulations made the JavaScript bloated and didn't keep the style separated from the code the way I normally prefer.

I then started playing around with pure SVG drawn with JavaScript or just straight SVG elements and how I could manipulate them with pure CSS.

For example:

<svg id="circle-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" 
width="400" height="300">
    <circle id="my-circle" cx="100" cy="100" r="50" />
</svg>

Can be styled as such:

circle {
  fill-opacity: 0.5;
  stroke-width: 4;
  fill: #3080d0;
  stroke: #3080d0;
  transition: fill 0.5s ease;
}
circle:hover{
  stroke-width:6;
  fill: #00f;
}

Just to play with... Fiddle

So far I've found that you can manipulate color, stroke, opacity and even put CSS3 transitions on these properties, but I can't find a definitive list anywhere or a guideline such as "All SVG properties like this can be controlled by SVG.

I'm curious because the first project with Raphael was just a POC, but soon we'll be starting a new project and we'll want to clean several aspects of it up (such as mixing the styles in with the JS) and do it in as "modern" a way as possible.

Is there a specific list or rule that defines which SVG properties and/or elements can be controlled by SVG? Also, are there any caveats, such as only svg elements created in a certain way can be styled, whereas others...?

Thanks!

Answer 1

Element attributes are divided in the SVG specification into CSS properties and ordinary attributes. Attributes cannot be manipulated by CSS but CSS properties can.

As for CSS3 transitions, it seems that it depends on the type of the property You just need to cross check the CSS properties type with the types that can be animated. For example it seems to me that mask which takes a funciri would be excluded from being animated by CSS3 transitions.