Как просмотреть нарезанную часть фрагмента preserveAspectRatio xMinYMin

Question

Я использую

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 902" xml:space="preserve" preserveAspectRatio="xMinYMid slice">

, чтобы мой SVG не растягивался при изменении размера окна. SVG полностью покрывает мою веб-страницу в развернутом окне, и я хочу, чтобы пользователь мог просматривать все в SVG (даже если пользователю нужно прокрутить, чтобы просмотреть его). Но проблема в том, что когда я изменяю размер окна, оно вырезает часть переполнения и не может ее просмотреть. Есть ли способ разрешить пользователю просматривать часть переполнения путем прокрутки или другого подхода (кроме использования preserveAspectRatio) для этого? Это код css, который я использую:

* {
    margin: 0;
    padding: 0;
}

html,
body,
svg {
    height: 100%;
    width: 100%;
}

#Layer_1 {
    display: block;
}

Answer 1

Как я уже сказал, вы можете сделать это, изменив значение атрибута viewBox. Далее идет очень простой пример, в котором вы используете ползунок для изменения значения viewBox:

itr.addEventListener("input", ()=>{
  let val = itr.value;
  theSVG.setAttribute("viewBox",`${val} 0 1920 902`)
})

svg{border:1px solid}

<input id="itr" type="range" min="-1000" max="1000" value="0">
<svg id="theSVG" viewBox="0 0 1920 902" preserveAspectRatio="xMinYMid slice">
<polyline points="-500,50 2500,400 -700,850 -500,50" />  
</svg>