2015-07-14 16 views
10

W związku z tym HTML obraz tła ładuje się dobrze w przeglądarkach Firefox, IE i Chrome. Ale w Safari po prostu to ignoruje.Safari nie renderuje obrazu w zagnieżdżonym SVG

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="Content-Style-Type" content="text/css"> 
    <title></title> 
</head> 
<body> 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 141.72999572753906 255.1199951171875"> 
    <image xlink:href="http://labels.labellogiclive.com/alfresco_10_p1_alf001_uk__v0.svg" preserveAspectRatio="none" x="0" y="0" width="141.73" height="255.12"></image> 
    </svg> 
</body> 
</html> 

Teraz pomyślałem, że może to być problem serwer, nie dając odpowiednie nagłówki, ale już sprawdzone i dobrze wygląda (image/svg+xml). Więc jestem trochę zagubiony ... Jakieś pomysły?

+1

@Siguza serio !? Więc jeśli otworzysz http://storage.labellogiclive.com/test_svg.html w przeglądarce Chrome i Safari, zobaczysz je jako w 100% identyczne !? – Siyfion

Odpowiedz

1

Złożyłem zgłoszenie błędu z Apple za pośrednictwem Apple Bug Reporter z identyfikatorem błędu 21959574. Mam nadzieję, że ktoś z Apple zanotuje i naprawi podstawowy problem.

3

Safari walczy z głęboko zagnieżdżonymi elementami SVG <image>.

Patrz, na przykład, komentarze tutaj: Embed SVG in SVG?

Twoje pierwsze <image> ładunki inny SVG, który sam zawiera <image> ładujący zdjęcie tła. Jeśli scalisz najodleglejszy element <image> (zdjęcie) w najbardziej zewnętrznym SVG, działa dobrze.

+1

Z powodów, których tak naprawdę nie mogę tutaj łatwo wprowadzić, nie mogę po prostu "scalić" dwóch plików SVG, oba zawierają bardzo różne dane, które (ostatecznie) muszą być przeanalizowane osobno. Jednakże, jeśli tak jest, nie ma rozwiązania dla Safari pozornie. Być może powinienem zgłosić to jako błąd w Apple? – Siyfion

+1

Czy można je scalić w czasie wykonywania, wstrzykując wewnętrzną do zewnętrznej za pomocą JS? Nie masz pewności, co masz na myśli, mówiąc o "analizowaniu osobno", więc jeśli podasz więcej szczegółów na temat tworzenia i używania tych SVG, pomogę ci uzyskać coś działającego. – ivanreese

+1

@Siyfionit Byłoby wspaniale, gdybyś mógł przesłać to jako błąd w Apple! – thomasfuchs