TRZECIA EDYCJA: oto działający przypadek testowy. Wygląda na to, że ma coś wspólnego z buforowaniem arkusza spritehev svg. Jeśli skonfiguruję kontrolę pamięci podręcznej na moim serwerze, aby nie było buforowania SVG, zachodzi takie zachowanie. Zapraszam do oglądania źródła (wszystko to w jednym pliku, ale nie chcę tutaj tego wszystkiego włączać).SVG w Chrome czasami nie renderują się.
https://stuff.spherical.fish/svgtest.html
DRUGA EDIT: poprawka wymienione poniżej (bezpośrednio wstrzykiwanie elementy w index.html zamiast korzystania z zewnętrznego spritesheet) po prostu przestał działać w v49 Chrome (która moja przeglądarka kanał beta właśnie zaktualizowaną do). v48 ma sporadyczny problem z renderowaniem, ale v49 całkiem konsekwentnie nie renderuje żadnego z następujących elementów: , który jest następujący: <svg><use></use></svg>; ale tylko na dużej, skomplikowanej, kanciastej stronie. Nudny prosty przypadek testowy działa dobrze. Dodano nagrodę dla każdego, kto może bezpośrednio wskazać mi znany problem lub skąd to się bierze. Z całą pewnością nie jest to plik nieznajdujący, ponieważ wciąż jest sporadycznym błędem, a cała strona jest w porządku w firefoxie i safari.
EDYCJA: to na pewno ma coś wspólnego z odwoływaniem się do zewnętrznego źródła. Kiedy osadzam pliki SVG bezpośrednio w pliku index.html i odwołuję się do nich za pomocą <use xlink:href="#id"></use>, działają poprawnie, ale jeśli odwołuję się do zewnętrznego pliku w elemencie <use>, ładują się tylko czasami.
Mam dziwne zachowanie w chrome (tylko - to nie dzieje się w operze, firefox, safari); Widzę to od co najmniej początku lat 40., w wersji.
Moje zachowanie jest w środku powtarzanej struktury kątowej. Wszystko jest takie samo - jest grupa dwojga flexboxowanych razem. Istnieje również element SVG, który wygląda następująco:
<svg class="icon-3">
<use xlink:href="/assets/trellis-icons.svg#icon-users"></use>
</svg>
dość prosta.
Chodzi o to, że dla niektórych tych powtarzających się elementów ikona nie renderuje się. Sprawdzanie elementu w narzędziach chrome chrome wskazuje, że renderowany element SVG <use> ma wysokość i szerokość, podczas gdy nierenderowany ma zerową wysokość i szerokość.
To nie jest jakaś prawdziwa różnica; Ręcznie zmontowałem DOM, aby jeden z tych nieprawidłowych wpisów całkowicie pasował do jednego z wyrenderowanych elementów, ale svg nadal się nie wyświetla. Oto odpowiedni zrzut ekranu.
można zobaczyć poniżej (i ignorować moje problemy wypełniające z przycisku) pierwszy wiersz nie posiada małe głowy i słowo bubble ikon. Jest to sporadyczny problem - jeśli ponownie załaduję stronę, może to być w porządku, a może żadna z ikon nie zostanie załadowana.
Zastanawiam się: czy istnieje jakiś niejasny problem związany z używaniem arkuszy sprite (wszystkie SVG, które wykazują to zachowanie są w tym samym dużym pliku SVG i są przywoływane przez #id) ładują się asynchronicznie czy coś?
Jeśli to naprawdę nieznane/nowe zachowanie, będę pracował nad inżynierią przypadku testowego, ale budowanie czegoś, co prawdopodobnie opiera się na pewnym rodzaju błędu współbieżności, jest trochę trudne. Więc pomyślałem, że najpierw zapytam.
EDYTUJ, aby dodać: Takie zachowanie nie występuje, jeśli wyeksportuję pojedynczy plik svg jako samodzielny i używam go w stylu <img src="icon.svg">.To nadal się nie udaje, jeśli zrobię użycie svg na ikonie w pojedynczym pliku autonomicznym.
EDYCJA: na życzenie użytkownika @ kaiido, tutaj znajduje się odpowiedni svg.
<svg xmlns="http://www.w3.org/2000/svg">
<!-- thirty other symbols snipped -->
<symbol id="icon-users" viewBox="0 0 512 512">
<path d="m352 397c-15-16-78-32-109-48c-21-11-32-33-32-53c0-10 7-19 13-26c5-6 9-14 13-24c8-4 18-12 18-31c0-12-2-19-5-24c1-11 2-22 3-34c4-45-42-90-89-90c-47 0-92 45-88 90c1 12 2 23 3 34c-4 5-5 12-5 24c0 19 9 27 18 31c4 10 8 18 13 24c6 7 13 16 13 26c0 20-11 42-32 53c-18 9-48 19-72 28l0 68l354 0c0 0 0-32-16-48z m146-7c-21-8-46-16-62-24c-17-8-25-27-25-43c0-8 5-15 10-21c4-5 8-12 11-20c7-3 15-10 15-25c0-10-2-16-5-20c1-9 2-18 3-27c3-37-34-76-73-76c-38 0-75 39-72 76c1 9 2 18 3 27c-3 4-5 10-5 20c0 16 8 22 15 25c3 8 7 15 11 20c4 6 10 13 10 21c0 10-4 22-11 31c30 11 43 22 53 33c19 19 19 58 19 58l103 0z"/>
</symbol>
</svg>
Jakieś błędy lub podobne w konsoli? taki błąd istniał jakiś czas temu, naprawą było użycie zamiast . Spróbuj się bawić z bezwzględnym identyfikatorem URI i formatowaniem tagów, ale wydaje się, że to dość dziwny błąd. Może przesłać bilet? również testujesz na komputerze lokalnym lub na zdalnym serwerze i czy istnieje on w firefox/IE? –
brak błędów na konsoli, używam . testowanie na serwerze localhost i serwerze zdalnym, błąd występuje tylko w chrome: ff, safari działają zarówno (nie testując na IE/edge/operze). Wygląda trochę jak błąd współbieżności - zwykle są to tylko pierwsze elementy z listy, które się renderują, a które nie, np. Jeśli spróbujesz użyć svg, który nie jest jeszcze załadowany, nic nie dostajesz. Bawię się próbując absolutnych identyfikatorów URI. – pfooti
mała aktualizacja - bezwzględne adresy URL nie pomogły, a także nie usunęłam całej zagadki na mojej liście ikonek SVG. (Pierwotnie właśnie zaimportowałem duży plik do pracy dev, ale użyłem tylko 10% symboli w nim). Wciąż przerywany (klikanie w kanciastą aplikację w sposób, który powoduje mutacje drzewa DOM, kończy się nagle renderowaniem ikon). – pfooti