Как сделать масштаб SVG без атрибута viewbox?
Я пытаюсь масштабировать компонент ReactJS так, чтобы он расширялся, чтобы соответствовать его родительскому контейнеру div. Компонент возвращает
<svg/>
элемент с несколькими дочерними элементами. API компонента реакции позволяет мне установить стиль CSS элемента svg. У меня нет способа присвоить элементу svg атрибут viewbox.
Есть ли способ заставить SVG масштабироваться, чтобы заполнить его родительский контейнер только через CSS?
Компонент React для справки: ссылка на сайт
Не работает someSelector svg {display:block; width: 100%}?
Нет, он расширяет SVG, чтобы заполнить всю область, но не масштабирует дочерние элементы SVG. Это означает, что нарисованные элементы остаются на месте и не масштабируются.
Если для SVG заданы свойства ширины и высоты, то, насколько я знаю, вам не повезло.
Что ж, вы могли бы обойти это, пройдя DOM после монтирования SVG и установив свойство viewBox с помощью ванильного JavaScript, но это, вероятно, не будет очень хорошим решением в долгосрочной перспективе.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Что ж, довольно просто. Все, что вам нужно сделать, это объединить ResizeObserver и преобразовать: масштаб (). Это решение было применено для растягивания карты мира svg в область виджета приборной панели в производственной сборке приложения в компании, где я работаю.
Существует суть, опубликованный со ссылкой на демонстрацию JSFiddle.
(function() {
const parent = document.querySelector('.parent');
const item = document.querySelector('.item');
let scaleAdjust = 1.0;
const process = (container, ref) => {
const {
height: originHeight,
width: originWidth
} = ref.getBoundingClientRect();
const {
height: containerHeight,
width: containerWidth,
} = container.getBoundingClientRect();
const [height, width] = [originHeight * scaleAdjust, originWidth * scaleAdjust];
const [from, to] = height > width ? [width, containerWidth] : [height, containerHeight];
const scale = to / from;
ref.style.transform = `scale(${scale})`;
scaleAdjust = 1 / scale;
};
new ResizeObserver(() => process(parent, item)).observe(document.body);
})();
Нелегко, поэтому существует атрибут viewBox.