SVG ma puste miejsce u góry przy zmianie rozmiaru przeglądarki

0

Pytanie

Kiedy mogę zmienić rozmiar przeglądarki, w górnej części SVG pojawia się cienka biała linia. Jeśli znów zmienię rozmiar strony, ona zniknie. Przy określonej szerokości strony pojawia się ponownie i znika. Kiedy otwieram plik SVG sam w sobie, nie widzę żadnych takich artefaktów. Kiedy ustawiam tło SVG na coś szalonego, np. background: red Widzę, że biała linia znajduje się wewnątrz SVG, bo ona staje się czerwone, a nie jakiś granicą lub artefaktem powstałym sąsiednim div. Jakieś pomysły o tym, dlaczego to może być? Do tej pory udało mi się go odtworzyć tylko w Chrome i Microsoft Edge. On świetnie wygląda w FF i Safari.

Jest to strona, na której znajduje SVG: https://striveworks.us/careers

oto przykład:

here's an example of the artifact

css google-chrome javascript reactjs
2021-11-23 16:44:28
1

Najlepsza odpowiedź

2

Problem w tym, że jeśli wyłączyć tło z pomocą inspect-elementów, linia zniknie, ale wtedy dolna część będzie źle pomalowana.

svg.careers__AnimatedCurveSVG-sc-1587ytp-2 hwGnAC.hwGnAC {
    background: rgb(244, 242, 246);
}

enter image description here

2021-11-23 16:49:57

Należy pamiętać, że informacja biała linia SVG znika podczas skalowania wektor obrazu. Proponuję zmienić wysokość elementu .hwGnAC na >= 9rem, tak jak niższe wartości nie rozwiązują tego problemu.
McRaZick

dziękuję, że spojrzeli na to... chcesz powiedzieć, że pusta przestrzeń tworzy się dlatego, że oryginalny SVG znacznie więcej? próbuję zrozumieć, jak to naprawić w samym SVG
raptoria7

tak............
Dean Van Greunen

W innych językach

Ta strona jest w innych językach

Русский
..................................................................................................................
Italiano
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................