Реагируйте на помощь по макету - Не могу заставить мои SVG иметь заданный размер, но при этом реагировать

Question

Я пытаюсь разработать веб-сайт с использованием Gatsby и React (однако этот вопрос касается React).

Я новичок в веб-разработке, поэтому я пытаюсь выяснить некоторые основы.

Моя проблема с целевой страницей. Я сделал два SVG, я хотел бы быть частью целевой страницы (Текст и Lo go), но я не могу правильно их размер, а также сделать их отзывчивыми.

Изображение того, как я хочу, чтобы страница выглядела

Причина, по которой я использую SVG, заключается в том, что я написал немного JS кусок, который оживляет героя при открытии страницы.

Я прочитал множество вопросов о переполнении стека о том, как сделать SVG-файлы отзывчивыми с помощью атрибута viewBox, но я не могу понять, как установить размер двух SVG-файлов, не удаляя их отзывчивые качества. Итак, на странице просто есть два огромных SVG, охватывающих весь видовой экран. Даже когда я пытаюсь указать ширину SVG, они уменьшаются на меньших экранах, а не уменьшаются.

Проблема, которую я заметил, заключается в том, что если я встраиваю два SVG в div, если я go проверю, что div, то он имеет высоту 0 и находится в верхнем левом углу, и SVG, как и прежде, находятся в середине страницы.

Я использую Bootstrap 4, и наверху у меня есть маленький Навбар, который, кажется, все игнорирует (например, мой div кажется go позади Навбара все волей-неволей).

Ниже приведена структура кода, которую я использую для визуализации (через компоненты React):

 <div> 
  <Hero>
   <HeroTitle>
     <svg1>
     <svg2>
   <HeroTitle/>
  </Hero>
 </div>

CSS для SVG:

#svg-hero-container {
  display: inline-block;
  position: relative;
  height: 200px;
    width: 100%;
    padding-bottom: 100%; 
    vertical-align: middle; 
    overflow: hidden; 
}

#svg1 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#svg2 {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%,-50%);
}

<svg id="svg1" viewBox="0 0 742 58"  preserveAspectRatio="xMinYMin meet" fill="none" xmlns="http://www.w3.org/2000/svg">
...
</svg>

<svg id="svg2" viewBox="0 0 672 210" preserveAspectRatio="xMinYMin meet" fill="none" xmlns="http://www.w3.org/2000/svg">
...
</svg>

Любой совет будет принят во внимание.

Вот живой сайт, где я нахожусь: https://emmarose.netlify.com/

Вот репозиторий GitHub на случай, если моего кода недостаточно: https://github.com/eduardoRubioG/emrose-cslate

Answer 1

Укажите ширину для каждого тега SVG.

<svg1 id="svg1">
<svg2 id="svg2">

#svg1 {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 400px;
  transform: translate(-50%,-50%);
}

#svg2 {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 300px;
  transform: translate(-50%,-50%);
}