SVG имеет пустое пространство сверху при изменении размера браузера

0

Вопрос

Когда я изменяю размер браузера, в верхней части SVG появляется тонкая белая линия. Если я снова изменю размер страницы, она исчезнет. При определенной ширине страницы он появляется снова и исчезает. Когда я открываю файл SVG сам по себе, я не вижу никаких подобных артефактов. Когда я устанавливаю фон SVG на что-то сумасшедшее, например background: red Я вижу, что белая линия находится внутри SVG, потому что она становится красной, а не какой-то границей или артефактом, созданным соседним div. Есть какие-нибудь идеи о том, почему это может быть? До сих пор мне удавалось воспроизвести его только в Chrome и Microsoft Edge. Он отлично смотрится в FF и Safari.

Это страница, на которой находится SVG: https://striveworks.us/careers

вот пример:

here's an example of the artifact

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

Лучший ответ

2

Ваша проблема в том, что если вы отключите фон с помощью inspect-элементов, линия исчезнет, но тогда нижняя часть будет неправильно окрашена.

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

enter image description here

2021-11-23 16:49:57

Обратите внимание, что дополнительная белая линия SVG исчезает при масштабировании векторного изображения. Я предлагаю изменить высоту элемента .hwGnAC на >= 9rem, так как более низкие значения не устраняют указанную проблему.
McRaZick

спасибо, что посмотрели на это... вы хотите сказать, что пустое пространство создается потому, что исходный SVG намного больше? пытаюсь понять, как исправить это в самом SVG
raptoria7

да............
Dean Van Greunen

На других языках

Эта страница на других языках

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