Почему я не могу контролировать размер встроенного SVG, полученного через JavaScript (даже с шириной, высотой и видопрои ⇐ Javascript

[Anonymous]

Я работаю на современном веб -сайте (я не веб -разработчик, ученик здесь ...), где я хочу использовать фоновый SVG для раздела. SVG был прослежен и экспортирован из Adobe Illustrator, и он содержит только элементы. Это истинный встроенный SVG, и он правильно встроен при включении непосредственно в HTML. Используя CSS или встроенные атрибуты, чтобы он заполнял участок (шириной 1400 пикселей, высотой 500 пикселей). Но независимо от того, что я пробую, SVG:
игнорирует ширину CSS/высота
игнорирует встроенные атрибуты, такие как ширина, высота и консервисная техника
Появляются очень маленькие или обрезанные, в зависимости от размера экрана или настройки
html html html .

Код: Выделить всё

js

Код: Выделить всё

fetch('images/lbackground.svg')
.then(res => res.text())
.then(data => {
const parser = new DOMParser();
const svgDoc = parser.parseFromString(data, 'image/svg+xml');
const svgElement = svgDoc.querySelector('svg');

// Add your CSS class
svgElement.classList.add('team-bpicture');

// Inject into container
document.getElementById('svg-team-container').innerHTML = '';
document.getElementById('svg-team-container').appendChild(svgElement);
});

css
.team-bpicture {
width: 1400px;
height: 500px;
opacity: 0.4;
object-fit: cover;
}
< /code>
Файл SVG:
имеет только только viewbox = "0 0 1384 1004" < /p>
Нет ширины или набора высоты изначально < /p>
Несмотря на тег в стиле - просто и элементы < /p> . Крошечный, обрезанный или игнорирует размер полностью. Использование работы отлично, но я не могу оживить пути таким образом. Здесь

Подробнее здесь: https://stackoverflow.com/questions/796 ... n-with-wid