Почему SVG переводит перед масштабированием? - PullRequest
0 голосов
/ 16 апреля 2020

У меня возникают проблемы при попытке объяснить поведение SVG, которое масштабируется с использованием поля просмотра. В поле с названием xMidYMid с окном просмотра, установленным на ширину 10, и высотой окна просмотра, установленным на 10, при увеличении высоты поля просмотра с 10 до 19 svg будет просто перемещаться вдоль оси x, прежде чем начнет масштабироваться, как ожидается. Для удобства пользования я включил пример Codepen Пример Codepen

  <div class="svg_container">

   <svg id="xMidYMid" preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" >
    <svg id="xMinYMin" class="svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 80 160" viewBox="0 0 10 80"   >
   <rect x='.5' y='.5' width='29' height='39' style="fill:red ;stroke:red" />
   </svg>
  </svg>
</div>
<div class="slideContainer">
  <input type="range" min="10" max="200" value="80" id="xMidYMidwidth" class="slider"></input>
  <p class="slider_text slider_text-width" id="xMidYMidwidthText">Vbw = 80 </p>
  <input type="range" min="10" max="200" value="160" id="xMidYMidheight" class="slider"></input>
  <p class="slider_text slider_text-height" id="xMidYMidheightText">Vbh = 160    </p>
</div>
...