How to change background color of SVG with SMIL

Question

Without javascript or another CSS, is it possible to change the background color (attribute style) of a SVG ?

This below has no effect :

<svg  xmlns="http://www.w3.org/2000/svg" 
 style="stroke:black;fill:black;font-size:18;background-color:orange"
 width="500"
 height="250"
 viewBox="0 0 500 250"
 version="1.0" >
  <set attributeName="style" attributeType="XML" begin="1s" dur="3s" to="background-color:crimson"/>
</svg>

You can generally only animate properties that are defined in the SVG specification. I.e. https://www.w3.org/TR/SVG11/propidx.html — Robert Longson, May 11 '18 at 21:16

score 0 · Accepted Answer · answered May 11 '18 at 21:21

background-color is not part of the SVG specification. To fill the SVG will a colour create a rect in the background with a given fill (see this question). Then you can use set to change the fill of the rect element.

<svg xmlns="http://www.w3.org/2000/svg" style="stroke:black;font-size:18" width="500" height="250" viewBox="0 0 500 250"version="1.0">
  <rect width="100%" height="100%" fill="orange">
    <set attributeName="fill" attributeType="XML" begin="1s" dur="3s" to="crimson"/>
  </rect>
</svg>

How to change background color of SVG with SMIL

1 Answers1