Chcę utworzyć obraz tła SVG dla strony internetowej przy użyciu regularnych sześciokątów we wzorze mozaikowym podobnym do poniższego obrazu. Potrzebuję jednak sześciokątów do połączenia, aby móc użyć:
background-image: url("path-to-hex.svg");Wzór CSS. Chciałbym to zrobić w Inkscape. Nie jestem jednak pewien, jak „pociąć” wzór na bloki. Jak mam zacząć to robić?
EDYCJA
Wynik wyszedł naprawdę dobrze!
Odpowiedzi:
Przy odrobinie operacji logicznej jest to dość łatwy proces.
Po prostu weź zestaw sześciokątów, które tam masz, utwórz prostokąt, który pasuje do pomarańczowego, który mam na powyższym obrazku (upewnij się, że rogi przyciągają się do odpowiednich punktów na sześciokątach), a następnie użyj narzędzia przecięcia, aby uzyskać pozbyć się wszystkiego poza prostokątem. To powinno dać ci wzór z taflami.
Edycja: Według komentarza Horatio (dobra rozmowa!), Pomyślałem, że powinienem wyjaśnić, jak osiadłem na tym konkretnym prostokącie. Podczas tworzenia kafelka każda część wzoru musi pojawić się co najmniej raz we wspomnianej kafelku (a najlepiej nie więcej niż raz). Dzięki temu wzorowi sprawdziłem, czy na osi x lub y są jakieś powtarzające się punkty; na szczęście dla mnie sześciokąty nie są ustawione pod dziwnym kątem, więc to sprawiło, że było to stosunkowo łatwe zadanie.
Na osi X wybrałem dwa sześciokąty, które zostały wyrównane. Byłyby to początek i koniec wzoru w poziomie. Następnie wybrałem z każdego pasujący punkt (w tym przypadku skrajnie lewy punkt). Oznaczałoby to dokładną szerokość prostokąta odcinania dla wzoru. Następnie zrobiłem to samo w pionie, wykorzystując punkty, które już wybrałem dla szerokości, jako górne rogi wycinającego się prostokąta wzoru. Po znalezieniu pasujących dolnych punktów zdefiniowano prostokąt odcinania.
Możesz użyć tej techniki na dowolnej liczbie kształtów. Możesz używać go również na sześciokątach (lub innych kształtach) pod kątem, ale pamiętaj, że płytka stanie się znacznie większa, w zależności od kąta.
źródło