У меня есть SVG-диаграммы внутри сложной сетки. Пользователи могут изменять размеры, добавлять и удалять сетки. В настоящее время я использую flexbox с разметкой в процентах, используя flex-based. Я обнаружил, что из-за разметки в процентах браузеры меняют размер моего элемента svg на частичную ширину и высоту пикселя. Например. 1000.47px. Графики SVG были закодированы, поэтому они выглядят четкими. Однако, когда ширина / высота svg имеет частичные пиксели, они больше не являются четкими и страдают от сглаживания.
Я пробовал:
- Настройка svg для использования shape-render = "crisp-edge"
- Использование JavaScript и ResizeObserver для определения изменения контейнера и установки ширины и высоты в полнопиксельные значения. Это в основном работает, но вызывает другие проблемы с макетом - я думаю, потому что дочерние элементы имеют точную ширину / высоту, он переопределяет процент основания гибкости?
- Использование JavaScript для определения частичного размера пикселя. Например. 1000.47 - 1000 и использование style = "height: calc (100% - .47px)". Это работает в некоторых сценариях, но если svg width / height имеет много десятичных знаков, это становится ненадежным. Я предполагаю из-за поведения округления.
Я начинаю думать, что макет, основанный на процентах, просто не подходит для моих требований (вышеуказанные решения кажутся довольно странными) и перехожу к использованию только абсолютного / относительного позиционирования, чтобы убедиться, что контейнеры не имеют частичных пикселей.
Нет ли простого способа указать браузерам использовать полнопиксельные значения для макетов флексбоксов в процентах?
Вот пример, чтобы попытаться объяснить проблему лучше по запросу: https://codepen.io/anon/pen/bZXLrj
Всякий раз, когда:
node.boundingClientRect().height; // or
node.boundingClientRect().width;
Возвращать нецелочисленные значения, начало SVG должно быть сглаженным.