Я хочу создать фоновое изображение SVG для веб-страницы, используя правильные шестиугольники в шаблоне тесселяции, подобном изображению ниже. Однако мне нужно, чтобы шестиугольники соединялись, чтобы я мог использовать:
background-image: url("path-to-hex.svg");
Шаблон CSS. Я хотел бы сделать это в Inkscape. Я не уверен, как «разрезать» шаблон на блоки. Как мне начать это делать?
РЕДАКТИРОВАТЬ Результат вышел очень хорошим!
С небольшим количеством логических операций это довольно простой процесс.
Просто возьмите набор шестиугольников, которые у вас есть, создайте прямоугольник, который соответствует оранжевому прямоугольнику, который у меня есть на изображении выше (убедитесь, что углы привязываются к соответствующим точкам шестиугольников), а затем используйте инструмент пересечения, чтобы получить избавиться от всего, что находится за пределами прямоугольника. Это должно оставить вас с мозаичным узором.
Редактировать: Согласно комментарию Горацио (хороший звонок!), Я решил, что должен объяснить, как я остановился на этом конкретном прямоугольнике. При создании плитки вам нужно, чтобы каждая часть вашего узора появлялась в указанной плитке хотя бы один раз (и в идеале не более одного раза). С помощью этого шаблона я посмотрел, есть ли какие-либо повторяющиеся точки на оси x или y; к счастью для меня, шестиугольники не расположены под странным углом, так что это упростило задачу.
На оси X я выбрал два шестиугольника, которые были выровнены. Это будет начало и конец узора по горизонтали. Затем я выбрал совпадающую точку из каждой (в данном случае самую левую точку). Это будет обозначать точную ширину прямоугольника отсечения для шаблона. Затем я сделал то же самое по вертикали, используя точки, которые я уже выбрал для ширины, в качестве верхних углов прямоугольника обрезки узора. Как только я нашел совпадающие нижние точки, прямоугольник отсечения был определен.
Вы можете использовать эту технику для любого количества фигур. Вы также можете использовать его на шестиугольниках (или других формах) под углом, но имейте в виду, что плитка станет значительно больше в зависимости от угла.
V-красный