Центрировать дочерний элемент внутри родительского, если родительский меньше дочернего

Question

<div style="width:300px;overflow-x:scroll;">
  <svg viewBox="0 0 500 200" width="500" version="1.1">
    <rect x = "0" y = "0" width = "500" height = "200" fill = "yellow" />
    <rect x = "200" y = "50" width = "100" height = "100" fill = "green" />
</svg>
</div>

Родительский блок 300 пикселей, а желтый svg внутри него 500 пикселей. Как отцентровать svg внутри родителя так, чтобы его центр совпадал с центром родителя? То есть, прокрутка была не только вправо, а в обе стороны? Спасибо!

Answer 1

без javascript я не знаю как такое провернуть и потому показываю с использованием всего одной стрчки javascript

смотреть на весь экран

document.querySelector(".svg").scrollLeft = 105;

<div class="svg" style="width:300px; overflow-x: auto;">
  <svg viewBox="0 0 500 200" width="500">
    <rect x="0" y="0" width="500" height="200" fill="yellow" />
    <rect x="200" y="50" width="100" height="100" fill="green" />
  </svg>
</div>

БЛОГ НА HUSL

Центрировать дочерний элемент внутри родительского, если родительский меньше дочернего

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