Обрезать SVG слева и справа - PullRequest
Новая
       55

Обрезать SVG слева и справа

0 голосов
/ 08 октября 2018

Извините, я не смог найти никакой существующей информации по этому вопросу, которая не требовала бы изменения окна просмотра вручную.

У меня есть встроенный SVG, который охватывает всю ширину веб-страницы (шириной 1920 пикселей)по умолчанию) и мне было интересно, есть ли способ обрезать изображение вместо его уменьшения (я понимаю, что это одна из основных точек использования SVG)

Изображение не должно масштабироватьсявниз, поскольку я встроил изображение PNG в SVG, причина этого в том, что я использую SVG в качестве адаптивной карты изображений.

Мне было очень трудно даже объяснить, что я пытаюсьДостигните такого времени диаграммы (извините!), я надеюсь, что это всего лишь случай мозгов понедельника, и решение проще, чем я думаю.

diagram

1 Ответ

0 голосов
/ 08 октября 2018

Вы можете сохранить атрибут viewBox, но если вы установите атрибуты width и height в SVG, он сохранит свой размер и не будет уменьшаться вместе с контейнером.Чтобы центрировать SVG в содержащем <div>, вам нужно применить небольшой трюк, который устанавливает свойство CSS left на 50%, а затем с помощью transform: translate(-50%, 0) возвращает его обратно.Кроме того, SVG должен иметь position: absolute и контейнер position: relative установлен.

Вот рабочий пример: 

.container {
  position: relative;
  margin: 0 auto;
  max-width: 400px;
  height: 160px;
  overflow: hidden;
}

svg {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
<div class="container">
  <svg width="800" height="160" viewBox="0 0 1000 200">  
    <rect x="0" y="0" width="1000" height="200" fill="teal" />
    <circle cx="500" cy="100" r="50" fill="goldenrod" />
  </svg>
</div>
...