Как масштабировать SVG, чтобы он соответствовал размерам div

Question

Я хочу использовать один и тот же SVG в разных DIV. Тем не менее, я хотел бы, чтобы SVG равномерно масштабировался до div.

Ссылка CodeSandbox на рабочий пример того, что у меня есть, приведена ниже

https://codesandbox.io/s/festive-wing-9f985w?file=/src/Icon.js

Что я имею:

Что бы я хотел:

Как мне этого добиться? Пожалуйста, дайте мне знать.

_{Свободный перевод вопроса How to scale SVG to fit the div от участника @moys.}

Answer 1

Вам нужно будет удалить атрибуты width и height элементов svg, рассчитать height каждого контейнера и установить width svg, равную height контейнера. Это работает, так как значок квадратный (см. viewBox="0 0 500 500")

//все контейнеры
let cc = document.querySelectorAll(".container");
cc.forEach((c) => {
  //получить высоту каждого контейнера
  let height = c.getBoundingClientRect().height;
  //получить элемент svg внутри каждого контейнера
  let svg = c.querySelector("svg");
  //установить ширину элемента svg
  svg.style.width = height;
});

body {
  margin: 0.15rem;
  padding: 0.15rem;
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.container {
  display: flex;
  align-items: center;
  border: 1px solid brown;
  border-radius: 0.25rem;
  margin: 0.15rem;
  padding: 0.15rem;
}

.Text {
  display: inline-block;
  margin: 0.15rem;
  padding: 0.15rem;
}

<div class="App">
  <div class="container">
    <div><svg xmlns="http://www.w3.org/2000/svg" class="Icon" viewBox="0 0 500 500">
        <path fill="none" id="mg" stroke="#000" stroke-width="36" stroke-linecap="round" d="m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110"></path>
      </svg></div>
    <h2 class="Text">Start editing to see some magic happen!</h2>
  </div>
  <div class="container">
    <div><svg xmlns="http://www.w3.org/2000/svg" class="Icon" viewBox="0 0 500 500">
        <use href="#mg"/>
      </svg></div>
    <h2 class="Text">Start editing to see some magic happen! if the magic does not happen, keep editing</h2>
  </div>
  <div class="container">
    <div><svg xmlns="http://www.w3.org/2000/svg" class="Icon"  viewBox="0 0 500 500">
        <use href="#mg"/>
      </svg></div>
    <h2 class="Text">Start editing to see some magic happen! if the magic does not happen, keep editing. Even after typing nothing happens, you need to just give u ;-)</h2>
  </div>
</div>

Обратите внимание:
поскольку вы используете одну и ту же иконку, то вместо повторения кода SVG для увеличительного стекла, вы можете указать идентификатор mg и повторно использовать его с помощью <use>

 <use href="#mg"/>

_{Свободный перевод ответа от участника @enxaneta.}

Answer 2

Попробовал сделать на css через grid (изначально в разметке был flex).

body {
  margin: 0.15rem;
  padding: 0.15rem;
}

.App {
  font-family: sans-serif;
  text-align: center;
  max-width: 500px;
}

.container {
  align-items: center;
  border: 1px solid brown;
  border-radius: 0.25rem;
  margin: 0.15rem;
  padding: 0.15rem;
  
  display: grid;
  grid-template-rows: 1fr;
  grid-auto-flow: column;
}

.Icon {
  height: 100%;

}

.Text {
  display: inline-block;
  margin: 0.15rem;
  padding: 0.15rem;
}

<div class="App">
      <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" class="Icon" viewBox="0 0 500 500"><path fill="none" stroke="#000" stroke-width="36" stroke-linecap="round" d="m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110"/></svg>
        <h2 class="Text">Start editing to see some magic happen!</h2>
      </div>

      <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" class="Icon" viewBox="0 0 500 500"><path fill="none" stroke="#000" stroke-width="36" stroke-linecap="round" d="m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110"/></svg>
        <h2 class="Text">
          Start editing to see some magic happen! if the magic does not happen,
          keep editing
        </h2>
      </div>

      <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" class="Icon" viewBox="0 0 500 500"><path fill="none" stroke="#000" stroke-width="36" stroke-linecap="round" d="m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110"/></svg>
        <h2 class="Text">
          Start editing to see some magic happen! if the magic does not happen,
          keep editing. Even after typing nothing happens, you need to just give
          u ;-)
        </h2>
      </div>
    </div>

БЛОГ НА HUSL

Как масштабировать SVG, чтобы он соответствовал размерам div

Ответы (2 шт):