Как изменить размер SVG с помощью медиа-запросов?

Question

Я знаю, что вы можете использовать атрибут viewBox для его обычного изменения размера, но как мне указать или выбрать этот атрибут в CSS?

мой текущий код:

@media only screen and (max-width: 767px) {
    svg {
        margin: 0 auto;
        width: 100%;
    }
}

I пытаюсь получить документ SVG / анимацию в центре страницы и сделать его равным 100% ширины области просмотра, когда область просмотра меньше 767 пикселей. Спасибо.

Answer 1

Попробуйте добавить обертку вокруг SVG с помощью text-align: center, чтобы центрировать SVG. Используйте @media screen and (max-width: 768px) {} для медиазапроса.

Код HTML:

<div class="svg-wrapper">
  <svg>
    <rect/>
  </svg>
</div>

Код CSS:

.svg-wrapper {
  text-align: center;
}

svg,
rect {
  width: 100px;
  height: 100px;
}

@media screen and (max-width: 768px) {
  svg,
  rect {
    width: 100%;
  }
}

Надеюсь, это поможет!

Answer 2

высота: 100%; ширина: 100%: все, что требовалось