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

#html #grid #svg #draw

#HTML #сетка #svg #нарисовать

Вопрос:

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

Например, есть ли более короткая альтернатива построению пути с использованием тега <path>? Возможно, определив квадрат 10px x 10px, а затем каким-то образом повторив его по всему холсту.

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

Спасибо

Ответ №1:

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

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

1. Неплохо. Для меня это выглядит как решение. Запустим несколько тестов.

2. Есть новые более быстрые методы? теперь, когда этому уже несколько лет!

3. Можно использовать css-фон (которым может быть svg-файл), предполагая, что вы хотите заполнить svg-холст, а не какую-то произвольную форму. AFAIK, ни один браузер пока не реализует элемент <hatch> из svg2, но он также должен уметь это делать. Смотрите svgwg.org/svg2-draft/pservers.html#Hatches .

Ответ №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’ для относительных горизонтальных и вертикальных линий. Это более компактно, но результат может быть не таким хорошим.

1. Обводка фигур может быть дорогостоящей, поэтому я предполагаю, что именно поэтому используются прямоугольники без обводки (вместо, например, линий). Прямоугольники также, как правило, оптимизируются зрителями.