лучший / самый короткий способ нарисовать сетку 1px в SVG

Question

Мне нужно нарисовать сетку размером 1 пиксель (интервал 10 пикселей), используя холст SVG, встроенный в веб-страницу. Есть много SVG-тегов на выбор, и я надеялся, что кто-нибудь подскажет, какие теги лучше всего подойдут для работы и произведут наименьшее количество кода.

Например, есть ли более короткая альтернатива прокладке пути с использованием тега ? Возможно, определив квадрат 10 × 10 пикселей, а затем повторив его поперек холста.

В любом случае, открывайте предложения, пожалуйста.

Спасибо

Answer 1

Вы можете сделать <pattern> (по сути, плитку в вашем вопросе) и заполнить любую фигуру этим.

Вот пример этой техники.

Answer 2

Я не эксперт (день 3!), Но я знаю, что Google использует ректы, чтобы делать это на графиках Google, с шириной или высотой, равной 1. Ничего особенного, просто напишите сетку с множествомтаких вещей:

<rect x="86" y="61" width="1" height="198" stroke="none" stroke-width="0" fill-opacity="1" stroke-opacity="1" stroke-dasharray="0" fill="#cccccc"></rect>

Почему они это делают?Не знаюИх графика хороша, так что кто-то, вероятно, подумал об этом.Я склонен делать это с путями, используя 'h' и 'v' для относительных горизонтальных и вертикальных линий.Это более компактно, но результат может быть не таким хорошим.