SVG Animation in iOS 13.4 (Safari) with js

Question

I have seen this thread here SVG animation struggles with Safari 13.1 (Mac OS & IOS) which seems to address the 'why' it's not working but I am not sure how to modify my code to add this suggestion:

<object type="image/svg+xml" data="animation/some.svg">

Here is my code..

// Build HTML
    return html`
      <style>
      ${this.style()}
      </style>
      <ha-card class = "card">
        <span class="icon bigger" id="icon-bigger" style="background: none, url(${this._hass.hassUrl("/local/icons/weather_icons/" + (this.config.static_icons ? "static" : "animated") + "/" + this.weatherIcons[this.current.conditions] + ".svg")}) no-repeat; background-size: contain;">${this.current.conditions}</span>

also here I also want to add code for animated icons:

           <div class="forecast clear">
              ${this.forecast.map(daily => html`
                <div class="day fcasttooltip">
                  <span class="dayname" id="fcast-dayName-${daily.dayIndex}">${(daily.date).toLocaleDateString(this.config.locale,{weekday: 'short'})}</span>
                  <br><i class="icon" id="fcast-icon-${daily.dayIndex}" style="background: none, url(${this._hass.hassUrl("/local/icons/weather_icons/" + (this.config.static_icons ? "static" : "animated") + "/" + this.weatherIcons[this._hass.states[daily.condition].state] + ".svg")}) no-repeat; background-size: contain;"></i>

I have SVG icons that have been working perfectly and do work in chrome on a PC.

Thanks for any help

You're using SVG as a background image, the suggestion is to use an object tag to display it instead. Where exactly are you stuck? — Robert Longson, May 01 '20 at 05:39
Thanks Robert. I don't know how to add that tag in the HTML code there. How do I include the object type and data to the span tag? Is it as easy as: ``` ${this.current.conditions}``` Will that work? Also should add that iOS 13.5 beta and it seems to be working again — DavidFW1960, May 03 '20 at 03:31

SVG Animation in iOS 13.4 (Safari) with js

0 Answers0