如何使用 SMIL 更改 SVG 的背景颜色

【问题标题】：How to change background color of SVG with SMIL如何使用 SMIL 更改 SVG 的背景颜色
【发布时间】：2018-05-11 21:01:51
【问题描述】：

如果没有 javascript 或其他 CSS，是否可以更改 SVG 的背景颜色（属性样式）？

以下内容无效：

<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>

【问题讨论】：

您通常只能对 SVG 规范中定义的属性进行动画处理。 IE。 w3.org/TR/SVG11/propidx.html

标签： svg styles smil

【解决方案1】：

background-color 不是 SVG 规范的一部分。为了填充 SVG，将使用给定的填充颜色在背景中创建 rect（参见 this question）。然后你可以使用set来改变rect元素的填充。

<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>

【讨论】：