SVG rect выравнивание по центру

Question

Имеется контейнер #container фиксированной высоты, вложенный контейнер #wrap и svg внутри последнего. В svg контейнере имеется rect с фоновым изображением шириной 600px. Контейнер #wrap занимает 100% ширины экрана и не более 600px. Каким образом можно изменить поведение svg контейнера так, чтобы вложенный rect всегда был по центру контейнера без использования js?

#container {
  height: 300px;
}
#wrap {
  /*border: 1px solid red;*/
  max-width: 600px;
  width: 400px;
  height: 100%;
  margin: auto;
}

<div id="container">
  <div id="wrap">
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
      <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="600px" height="300px">
          <image href="https://dummyimage.com/600x300/3029b3/fff" x="0" y="0" width="600px" height="300px"></image>
        </pattern>
      </defs>
      <rect x="0" y="0" width="600px" height="300px" fill="url(#img1)"></rect>
    </svg>
  </div>
</div>

Должно получиться так:

Answer 1

preserveAspectRatio="xMidYMid slice"
viewBox="0 0 600 300"

#container {
  height: 300px;
}

#wrap {
  border: 1px solid red;
  max-width: 600px;
  width: 100%;
  height: 100%;
  margin: auto;
  animation: w-300-600 5s linear alternate infinite;
}

svg {
  width: 100%;
  height: 100%;
}

@keyframes w-300-600 {
  from { width: 300px; }
  to   { width: 600px; }
}

<div id="container">
  <div id="wrap">
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" viewBox="0 0 600 300">
      <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="600px" height="300px">
          <image href="https://dummyimage.com/600x300/3029b3/fff" x="0" y="0" width="600px" height="300px"></image>
        </pattern>
      </defs>
      <rect x="0" y="0" width="600" height="300" fill="url(#img1)"></rect>
    </svg>
  </div>
</div>

БЛОГ НА HUSL

SVG rect выравнивание по центру

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