Я хочу разместить линии сетки и вершины поверх макета CSS Grid.Я пытаюсь выяснить, возможно ли это, используя только width, height и viewBox.
Я специально пытаюсь положить svg поверх div.Поэтому предложение рисовать все в SVG не то, что я пытаюсь сделать.
Пример: https://jsfiddle.net/4nx7aqwg/1/
Я бы хотел, чтобы все было внутри SVGиспользуя единицу длины.Поэтому, если я хочу нарисовать линию от 0,0 до 2,2, это может быть:
<path d="M 0 0 L 2 2"></path>
Я попытался найти какую-то математику, чтобы установить viewBox таким образом, чтобы один блокдлина определяется шириной ячейки html (плюс grid-gap?)
С 9 столбцами это 8 линий сетки между ячейками.Каждая линия сетки имеет размер 2 пикселя (grid-gap:2px).Таким образом, каждая ячейка будет (600-(8*2))/9 = 64.888888889px
Попытка 1: Если бы у меня была строка SVG от 0,0 до 1,0, я бы хотел, чтобы она начиналась с левой стороны2px границы и простираются до конца 2px сетки разрыва.Значит ли это, что мне нужно 1 svg unit = 64.888888889px + 2px + 2px = 68.888888889px?В этом случае у меня будет viewBox="0 0 8.767741935 8.767741935"
Попытка 2: Если у меня есть путь SVG с шириной 4, то его ширина выходит из центра.Значит, это может означать, что мне нужно 1 svg unit = 64.888888889px + 1px + 1px = 66.888888889px?В этом случае у меня будет viewBox="0 0 9.029900332 9.029900332"
Они не будут работать правильно.
Смежные вопросы:
Я установил vector-effect: non-scaling-stroke; на path элементах.Означает ли это, что stroke-width="2" даст 2px широкий ход?Или мне нужно вычислить stroke-width исходя из моего текущего viewBox?
Это бесполезное усилие?Будут ли все десятичные числа гарантировать, что я никогда не смогу выровнять это правильно?
Должен ли я отказаться от простых единичных измерений внутри svg (<path d="M 0 0 L 2 2"></path>) и вместо этого попытаться выяснить, какие координаты должны бытьв зависимости от ширины ячейки (например, <path d="M 0 0 L 129.77776 129.77776"></path>)
Больше контекста - у меня есть уже существующая сетка html / css через display:grid; & grid-gap:2px.Этот div 600x600.Каждая «клетка» имеет размер (600-(8*2))/9=64.8888.
Но у нее нет внешнего края, поэтому я применяю padding:2px.«Целая» сетка теперь 604x604:
В настоящее время я хочу разместить SVG поверх сетки и рисовать над ней (врежим рисования, который имеет вершины).Обратите внимание, что верхние / левые вершины находятся на одном уровне с краем и над отступом (неправильно, но все же - они находятся на одном уровне, потому что представление обрезает их).Я бы хотел, чтобы правые / нижние вершины были одинаковыми.Все круги должны быть центрированы точно там, где пересекаются две линии сетки.
Это результат, если svg имеет viewBox="0 0 9 9" width="600" height="600"
Поэтому я хочу, чтобы все края находились на одном уровне, поэтому мне нужно, чтобы svg был 604x604.Существует ли значение x такое, что viewBox="0 0 x x" даст мне то, что я ищу?
В следующем примере еще viewBox="0 0 9 9".Обратите внимание, что первая синяя линия находится немного левее линии сетки, а последняя синяя линия немного правее.Линии сдвигаются из-за неправильного окна просмотра:
Результат с viewBox="0 0 9 9" width="600" height="600":
Результат с viewBox="0 0 9 9" width="604" height="604":
Итак, я пытаюсь идеально выровнять сетку поверх div.Если я смогу идеально выровнять сетку, то смогу правильно выровнять все остальное, и нарисованные линии будут лежать поверх линий сетки.