2

<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 внутри родителя так, чтобы его центр совпадал с центром родителя? То есть, прокрутка была не только вправо, а в обе стороны? Спасибо!
Пример искомого результата

2
  • @Айболит в вашем примере влево прокрутки нет 7 сен 2021 в 6:41
  • @Айболит добавил картинку для примера искомого результата 7 сен 2021 в 6:44

1 ответ 1

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>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.