Как просмотреть отрезанную часть среза 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;
}

_{Свободный перевод вопроса How to view the sliced part of preserveAspectRatio xMinYMin slice от участника @Raymond Chong.}

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>

_{Свободный перевод ответа How to view the sliced part of preserveAspectRatio xMinYMin slice от участника @enxaneta.}

БЛОГ НА HUSL

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

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