svg на codepen имеет полосы прокрутки не может избавиться от него

Question

Я не знаю, как избавиться от полос прокрутки на моем примере с кодом, может кто-нибудь, пожалуйста, взгляните на мои SVG и CSS и посмотрите, сможете ли вы удалить полосы прокрутки, не нарушая сгенерированное изображение. Мне нужно, чтобы изображение подходило без полос прокрутки, так как есть перекрытие, я думаю

codepen

<svg viewBox="0 0 500 800" width="100%"> 
  <defs>
    <pattern id="hexagons" width="100%" height="100%" >
      <g id="svg" fill="black" x="0" y="0"></g>    
    </pattern>
    <mask id="hexagon-halftone-mask" x="0" y="0" width="100%" height="100%" >  
     <rect x="0" y="0" width="100%" height="100%" fill="url(#hexagons)" />

   </mask>
  </defs>

  <image width="100%" xlink:href="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426_960_720.jpg" mask="url(#hexagon-halftone-mask)"/> 
</svg>

Answer 1

Если я правильно понимаю, вы хотите избавиться от полос прокрутки, но вам также нужно изображение, чтобы соответствовать.

Для 1-й части вы просто должны добавить:

overflow: hidden;

к вашемуТело CSS.Это скроет полосы прокрутки, но не помешает вашей svg иметь большую высоту, чем окно и переполнение.

Итак, для этого вы хотите добавить:

svg {
   max-height : 100%;
   width: 100%;
}

(я поставил ширинутам, а не в HTML-коде, потому что это имеет больше смысла для меня, но вы также можете оставить его там и просто добавить max-height)

Редактировать: max-height необязательно в зависимости от размера / соотношениякартинка в вашем проекте.Это означает, что после точки ваше изображение может быть меньше ширины экрана.Но без него в вашем текущем коде будет изображение выше высоты рамки.

Редактировать 2: Кодовое соединение с настраиваемыми размерами шестиугольника, минимальным размером и интервалом.