SVG动画而非浏览器

-2

打开我有动画的.SVG here但是当我在浏览器中打开它，我得到一个错误：SVG动画而非浏览器

注意颜色不同，但代码是相同的。

<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'不会出现。

谢谢

来源

2016-10-10 Brad Walls

为什么你提供一个链接到错误消息的图片，而不是引用错误消息的？ – Quentin

错误消息对我来说似乎很清楚。那你知道吗？ – Quentin

在SVG中，一个属性必须有一个值，例如， selected="selected"。在这种情况下，你不需要动画属性。

这里是你有什么解决：

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

来源

2016-10-10 13:13:14

'animate =“animate”'不是''路径的有效键值组合：https：//developer.mozilla.org/en-US/docs/Web/SVG/Element/animate –

谢谢，编辑。 –

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

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

我们看看<animate>文档：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

来源

2016-10-10 13:15:46

SVG动画而非浏览器

回答

相关问题