SVG identificatori di frammento sono scambiati in Safari quando servito attraverso webapp

ho replicato il mio problema nel seguente esempio sempliceSVG identificatori di frammento sono scambiati in Safari quando servito attraverso webapp

Ho una semplice pagina web come il seguente:

<html> 
    <head></head> 
    <body> 
     <img src="icons.svg#close"></img> 
     <br> 
     <img src="icons.svg#error"></img> 
    </body> 
</html>

visualizzazione di questa pagina localmente in Safari, la pagina esegue il rendering correttamente:

Correct rendering

w qui l'icona di chiusura appare sopra l'icona di errore.

Tuttavia, quando io servo il file con NodeJS webapp (o utilizzare il comando python SimpleHTTPServer) e visualizzarlo in Safari, quindi le immagini sono nelle rispettive posizioni:

In correct rendering

anche se la dom sembra ancora corretta e gli attributi src di ogni tag img mantengono i percorsi corretti.

Ecco il file icons.svg:

<?xml version="1.0" encoding="utf-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <style>:root>svg{display:none}:root>svg:target{display:block}</style> 
    <svg viewBox="0 0 12 12" enable-background="new 0 0 12 12" id="close"> 
     <path d="M7.2 6l4.5-4.4c.4-.4.4-.9 0-1.3s-.9-.4-1.3 0L6 4.7 1.6.3C1.2-.1.7-.1.3.3s-.4.9 0 1.3L4.7 6 .3 10.4c-.4.4-.4.9 0 1.3.2.2.4.3.6.3s.5-.1.7-.3L6 7.3l4.4 4.4c.2.2.4.3.7.3.2 0 .5-.1.7-.3.4-.4.4-.9 0-1.3L7.2 6z" opacity=".3" enable-background="new"/> 
    </svg> 
    <svg viewBox="0 0 58 46" enable-background="new 0 0 58 46" id="error"> 
     <style type="text/css">.st0{fill:#ff9141}.st1{fill:#fff}</style> 
     <path class="st0" d="M30.6 1c-.9-1.4-2.3-1.4-3.2 0L.4 43.5C-.5 44.9.2 46 1.8 46h54.4c1.7 0 2.3-1.1 1.4-2.5L30.6 1z"/> 
     <path class="st1" d="M26.3 15.2h5.5V30h-5.5zM26.3 33.5h5.5v5.3h-5.5z"/> 
    </svg> 
</svg>

la pagina viene visualizzata correttamente in tutti gli altri browser, a prescindere se il file viene caricato localmente o servita attraverso un server.

fonte

2015-09-17 Tyler

Molto, molto strano. Sto ottenendo lo stesso comportamento quando si accede ai file anche da un server web Apache. –

ho provato con pochi server web disponibili, non riesco a riprodurre questo comportamento. può essere causato dal tuo server web che non serve file icons.svg in tempo, quindi il browser decide di non aspettare e provare l'icona successiva e quindi svg è disponibile? – ilj

Senza dover testare Safari, potrebbe anche essere un problema di Content-Type dell'intestazione HTTP. –

Ciò è dovuto al supporto CSS frammento SVG incompleto/buggy in Safari. Browser supportati per questa tecnica è ancora relativamente a macchia di leopardo - vedi https://css-tricks.com/svg-fragment-identifiers-work/ versioni

attuali di Chrome/Safari/Opera (38/8/25) gestisce bene tutte le tecniche HTML, ma nessuna delle tecniche CSS, tra cui il fondo -posizionare uno.

Ecco come il mio Safari 8 (a sinistra) e Chrome (a destra) rendono la pagina di prova - di notare che le icone dovrebbero andare ogni volta:

Alcuni esperimenti con il vostro follow contenuti:

Se ripeto la coppia di immagini una seconda volta, la quarta immagine è in qualche modo un composto delle due (in basso a sinistra). Nessuna interpretazione del tuo svg dovrebbe mai essere in grado di produrre un'immagine come questa. È interessante notare che ottengo esattamente la stessa divisione se si utilizzano proprietà di stile diverse, ad es. opacità (in basso a destra):

Se io zoom avanti e indietro con cmd ++ e cmd +-, le sovrapposizioni e le immagini parziali cambiano.

Ridimensionamento pagina ha anche un effetto.

ipotizzando che la designazione delle immagini può essere in qualche modo interagire uno con l'altro, ho provato con quattro diverse copie dell'immagine (icons1.svg#close, icons2.svg#error etc.) e facendo riferimento alle separatamente. Questo problema è stato risolto principalmente, ma nella quarta immagine mancavano i tre quarti inferiori. Tuttavia, non appena ho ridimensionato la finestra, è apparsa la parte mancante dell'immagine.

Bottom line: incomplete/buggy svg identificatore di frammento/gestione CSS.

fonte

2015-09-29 14:47:24 CupawnTae

SVG identificatori di frammento sono scambiati in Safari quando servito attraverso webapp

risposta

Problemi correlati