Использование SVG в качестве гибкого фона с позицией: absolute;

Question

Я хотел бы иметь возможность использовать встроенные SVG в качестве фоновых изображений - без использования их в качестве CSS фоновых изображений.

Мне нужна возможность изменить fill SVG, поэтому с помощью некоторых абсолютно расположенных элементов я подумал, что это можно будет сделать. Но мне не очень везет.

Пример HTML:

<div class="block">
  <div class="block-bg">
    <svg><!-- SVG code --></svg>
  </div>
  <div class="block-text">
   <p>Content</p>
  </div>
</div>

В этом подходе SVG помещается за <div class="block-text"> в попытке увеличить / уменьшить его. / ответить на содержание.

Мои текущие CSS:

.block {
  position: relative;
}

.block-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.block-text {
  position: relative;
  z-index: 2;
  padding: 10rem;
}

.block-bg svg {
  fill: grey;
}

Довольно простые вещи, но кажется, что SVG сложно действовать правильно в определенных обстоятельствах.

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

Вот кодекс с примером кода: https://codepen.io/abbasarezoo/pen/86f824a2d5a57279c19b33cf14d8904a

Спасибо за любую помощь в этом.

Answer 1

Ваш SVG должен заполнить пространство, указанное в width: 100%; height: 100%;, и если вы установите preserveAspectRatio на "none" для вашего SVG-элемента, вы получите результат, который вам нужен:

.block {
  position: relative;
}

.block-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.block-text {
  position: relative;
  z-index: 2;
  padding: 10rem;
}

.block-bg svg {
  fill: grey;
  width: 100%;
  height: 100%;
}

<div class="block">
  <div class="block-bg">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1760 515" preserveAspectRatio="none"><!-- SVG code --></svg>
  </div>
  <div class="block-text">
   <p>Content</p>
  </div>
</div>

С вашими данными CodePen SVG вот обновленная рабочая демонстрация .