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