SVG tegnes feil når brukt i <img> tagg på Chrome for Android

[jpg]

Har en SVG fil, som tegnes korrekt når åpnes "direkte" i Chrome for Android, men med en gang den settes inn i en <img> tagg (evt <object>) tegnes den feil.

Problemet skjer IKKE i Chrome for Windows, og heller ikke i noen annen nettleser (pc/nettbrett/mobil/etc)

 

SVG fil (tegnes korrekt):

https://vipnytt.no/tmp/meteogram.svg

 

HTML dokument med <img> tagg (mangler temperatur kurve):

https://vipnytt.no/tmp/meteogram.html

 

Problemet gjelder absolutt alle utgaver av Chrome for Android: (stabil, beta, dev, canary), samt er uavhengig av type mobil/nettbrett.

 

Noen som vet hva som er problemet, evt hvordan det kan løses? Er åpen for alle løsninger, inklusive fil-modifikasjoner.

Har forsøkt å google dette fenomenet, men ikke funnet noe som helst... Finnes det noe offisiell bug-report?

[Emancipate]

Prøv med et gyldig HTML5-dokument.

[jpg]

Prøv med et gyldig HTML5-dokument.

 

Har forsøkt dette også, fjernet opprinnelig bit for bit av HTML koden, helt til kun <img> taggen sto alene igjen.

 

Som en nødløsning prøver jeg nå å konvertere SVG -> PNG on the fly, men er ikke en fullgod løsning dette heller.

Periodisk problem, mulig at yr.no kan gjøre noe med saken, er tross alt de som genererer SVG-filen.

[Emancipate]

Har yr.no det samme problemet?

[jpg]

Yr.no bruker SVG grafen på desktop-utgaven av sidene sine, men en helt annen variant på de relativt nye mobil-sidene.

 

Inntil de fikk ny app for ca 2 mnd siden, brukte de SVG utgaven internt i appen sin også, men ikke nå lenger.

 

Setter tråden som løst, og kontakter yr.no om problemet.

[Emancipate]

https://validator.w3.org/check?uri=https%3A%2F%2Fvipnytt.no%2Ftmp%2Fmeteogram.svg&charset=%28detect+automatically%29&doctype=Inline&group=0

[Taggi]

For meg ser det ut som stroke attributten ikke er blitt satt på temperatur linjen. Kanskje du kan sette den selv ala noe sånt som gjort her: https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color

[jpg]

@Taggi Det har du helt rett i ja, nice catch.

Legges stroke="#F01C1C" til på linje 466, blir temperatur linjen synlig igjen, dog ensfarget rød (ikke rød eller blå avhengig av temperatur)

 

Demo: https://vipnytt.no/tmp/meteogram2.svg

 

Temperatur linjen tegnes i en <path> tagg på linje 466, denne er usynlig pga manglende farge.

På linje 467 og 468 gjenbrukes temperatur linjen ved hjelp av <use> taggen, den ene for rød, den andre for blå.

Er ikke ekspert på SVG, men kan se ut som om disse røde og blå grafene klippes og blir satt inn i som synlige objekter på linje 108-110 (blå) og linje 111-113 (rød).

 

Kom over denne relaterte buggen på Stack Overflow, SVG <use> elements in Chrome not displayed som resulterte i en Chromium bug rapport. Denne ble lukket i 2013.

 

Trolig er det snakk om en Chrome/Android bug likevel. Skal forsøke å gjøre litt mer research, evt også teste med eldre versjoner av Chrome.

 

EDIT #5: Her er brytningspunktet:

Versjon 61.0.3163.98 - OK

Versjon 62.0.3202.3 - BUGGY

Finner ingen APK-er tilgjengelig for nedlasting mellom disse to versjonene...

Endret 3. desember 2017 av jpg