Часто вижу в ответах использование координатной сетки
Она используется, как фон для различных элементов. Но эта сетка нарисована видимо в растровом редакторе и сохранена в растровом формате.
На мой взгляд, для адаптивности, видимо нужно сделать координатную сетку в формате SVG.
Рисовать с помощью line
, polline
, path
не вариант.
Попробовал сделать с помощью pattern
, где каждая ячейка имеет размеры 10Х10px
<svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="p10" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="1"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#p10)" />
</svg>
Но как сделать, чтобы были ещё деления через каждые 100px
?