Управление viewBox в SVG с помощью JavaScript (без библиотек)

Чтобы дать более точный ответ, было бы полезно увидеть контекст SVG, но следующий код сработал у меня в чистом документе SVG:

shape = document.getElementsByTagName("svg")[0];
shape.setAttribute("viewBox", "-250 -250 500 750"); 

Возможно, проблема связана с тем, что атрибут viewBox чувствителен к регистру?

У вас ошибка в коде: viewbox отличается от viewBox — буква B должна быть заглавной. Измените код на следующий:

a.setAttribute("viewBox", "0 0 " + SVGWidth + " 300");

Это должно решить вашу проблему.

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

const windowWidth = window.innerWidth ||
  document.documentElement.clientWidth ||
  document.body.clientWidth;

const windowHeight = window.innerHeight ||
  document.documentElement.clientHeight ||
  document.body.clientHeight;

// Используем getElementById для конкретного SVG
const shape = document.getElementById("background-svg");

function onWindowResize() {
    console.log(windowWidth, windowHeight);

    if (windowWidth < 600 || windowHeight < 900) {
        shape.setAttribute("viewBox", "0 0 400 800");
    }
}

// Добавляем обработчик события
window.addEventListener("resize", onWindowResize);

Этот метод неплохо сработал для меня. Буду рад, если вы подскажете, как его можно улучшить или предложите альтернативные решения. Удачи в coding!

Дополнительно, если вы хотите динамически задать размеры viewBox, используйте шаблонные литералы ES6 вместо конкатенации строк.

shape = document.getElementsByTagName("svg")[0];
const view = `${xValue} ${yValue} ${width} ${height}`; // шаблонные литералы
shape.setAttribute("viewBox", view);

Это позволит вам более легко и читабельно формировать строку для атрибута viewBox.