Блог

У меня есть svg с фиксированной шириной в div, которая меньше, чем svg.

Таким образом, overflow:auto это позволяет мне прокручивать по горизонтали. Однако, когда я уменьшаю масштаб с помощью transform:scale() , overflow:auto он, похоже, не обновляется, сохраняя исходную ширину, а не масштабированную, чтобы решить, должна ли горизонтальная прокрутка быть активной или нет.

 <div style="width:300px;overflow:auto">
  <svg width="500px" style="transform:scale(1);transform-origin:center">
    Some random content
  </svg>
</div>
 

Теперь я программно обновляю масштаб svg, что отлично работает, но, как я пытаюсь использовать transform-origin: center; , вы не можете видеть svg, потому что он центрирует его в середине оригинала 500px , а не в центре 500px*scale .

Должен ли я настроить это по-другому?