animierte SVG nicht in Browser

Question

Öffnen Ich habe eine .svg animiert here jedoch, wenn ich es im Browser öffne ich eine Fehlermeldung erhalten:

Beachten Sie die Farbe anders ist, aber der Code ist das gleiche.

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

Alle Ideen, warum die animierte und '80' nicht angezeigt wird.

Dank

Answer 1

In SVG, hat ein Attribut einen Wert hat, z.B. selected="selected". In diesem Fall brauchen Sie das animate-Attribut sowieso nicht.

Hier ist, was Sie zu beheben haben:

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

Answer 2

Sie haben ein zusätzliches Attribut Schlüssel in Ihrem <animate> Pfad. Es sollte

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

Siehe <animate> ‚s Dokumentation sein: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate