带有animateTransform的SVG动画在Angular的<app-root> </app-root>中不起作用

Question

有什么特殊的原因，为什么svg动画可以在其他地方工作，但不能在主要组件模板中工作？

我通常有一个用于加载程序的css动画图像，我想尝试一个svg动画。

示例代码：

<app-root>
  <div class="loader">
    <svg version="1.1" class="svg-loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
    y="0px" viewBox="0 0 80 80" xml:space="preserve">

      <path id="spinner" fill="#D43B11" d="M40,72C22.4,72,8,57.6,8,40C8,22.4,
        22.4,8,40,8c17.6,0,32,14.4,32,32c0,1.1-0.9,2-2,2
        s-2-0.9-2-2c0-15.4-12.6-28-28-28S12,24.6,12,40s12.6,
        28,28,28c1.1,0,2,0.9,2,2S41.1,72,40,72z">

      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 40 40" to="360 40 40" dur="0.6s"
          repeatCount="indefinite" />
      </path>
    </svg>
  </div>
</app-root>

编辑： 我正在Angular 5中对其进行测试，而我正在Angular 7中对其进行测试。