动画SVG无法在浏览器中打开

Question

我动画了一个.svg here然而当我在浏览器中打开它时出现错误：

请注意颜色不同但代码相同。

<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.32 84.01">
  <defs>
    <style>
      .cls-1{fill:#000000;}.cls-2,.cls-3{fill:none;stroke-miterlimit:10;}.cls-2{stroke:#000000;}.cls-3{stroke:#000000;}
    </style>
  </defs>
  <title>
    endless 60
  </title>
  <path class="cls-1" d="M14.45 1.65H1.18v6.11h8.65v1.19H-.01V.42h14.46v1.19zm0 21.92H0v-8.48h9.84v1.19H1.19v6.14h13.26v1.19zM17.59 52.68l-.76.92L1.19 40.76V53.6H0V38.22zM1.08 31.42l.76-.92 15.61 12.84V30.5h1.19v15.38zM6.13 60.91c15 0 15 23.1 0 23.1H.19v-23.1h5.94zm0 21.92c13.3 0 13.3-20.73 0-20.73H1.38v20.72h4.75zM25.62.42h1.19v22h13.27v1.19H25.62V.42zM40.08 31.69H26.81v6.11h8.64v1.19h-9.84v-8.48h14.46v1.19zm0 21.92H25.62v-8.49h9.83v1.19H26.8v6.11h13.27v1.19zM23.45 77.05c0 4 3.7 5.78 7.1 5.78s7.13-1.45 7.13-5.41c0-2.11-1-4.19-4.46-5.51-4.13-1.58-9.21-2.41-9.21-6.67 0-3.47 3.3-5.25 6.54-5.25s6.3 1.72 6.3 5.25h-1.2c0-2.77-2.61-4.16-5.25-4.16s-5.21 1.39-5.21 4.16c0 3.3 4.32 4.09 8.35 5.61s5.31 3.93 5.31 6.54c0 4.52-3.73 6.63-8.32 6.63-3.53 0-8.28-1.85-8.28-7h1.2zM46.63 17.06c0 4 3.7 5.78 7.1 5.78s7.13-1.45 7.13-5.41c0-2.11-1-4.19-4.46-5.51-4.13-1.58-9.21-2.41-9.21-6.67 0-3.47 3.3-5.25 6.54-5.25s6.3 1.72 6.3 5.25h-1.19c0-2.77-2.61-4.16-5.25-4.16s-5.21 1.39-5.21 4.16c0 3.3 4.32 4.09 8.35 5.61s5.31 3.93 5.31 6.54c0 4.52-3.73 6.63-8.32 6.63-3.53 0-8.28-1.85-8.28-7h1.19z">
    <animate
             attributeName="opacity"
             dur="2000ms" to="#f06d06"
             animate repeatCount="indefinite">
    </animate>
  </path>


  <circle class="cls-2" cx="211.53" cy="732.35" r="4.06" transform="rotate(-30 -1168.947 677.542)"/>
  <circle class="cls-2" cx="211.7" cy="744.16" r="7.65" transform="rotate(-30 -1168.77 689.35)"/>
  <path class="cls-3" d="M63.82 72.01c0 5.71-4 10.83-9 10.83s-9-4.85-9-10.83 4-10.83 9-10.83 9 4.85 9 10.83z"/>
  <path class="cls-1" d="M44.07 27.34h19"/>
</svg>

为什么动画和'80'没有出现的任何想法。

由于

Answer 1

您的<animate>路径中有一个额外的属性键。它应该是

<animate
         attributeName="opacity"
         dur="2000ms" to="#f06d06"
         repeatCount="indefinite">
</animate>

请参阅<animate>的文档：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

Answer 2

在SVG中，属性必须具有值，例如selected="selected"。在这种情况下，您无论如何都不需要animate属性。

以下是您需要解决的问题：

<animate
  attributeName="opacity"
  dur="2000ms" to="#f06d06"
  repeatCount="indefinite">
</animate>