Làm cách nào tôi có thể tạo một tàu lục giác ốp lát (cho SVG / Web)?


11

Tôi đang tìm cách tạo một hình nền SVG cho một trang web bằng cách sử dụng các hình lục giác thông thường theo mô hình sắp xếp tương tự như hình ảnh bên dưới. Tuy nhiên, tôi cần các hình lục giác để kết nối với nhau để tôi có thể sử dụng:

background-image: url("path-to-hex.svg");

Mẫu CSS. Tôi muốn làm điều này trong Inkscape. Tôi không chắc chắn làm thế nào để "cắt" mô hình thành các khối mặc dù. Làm thế nào tôi có thể bắt đầu làm điều này?

Hình lục giác

EDIT Kết quả đi ra trông thực sự tốt! đầu ra


Sẽ hữu ích nếu bạn có thể dán một liên kết đến tệp inkscape!
V-Red

Câu trả lời:


21

Với một chút thủ thuật thao tác boolean, đây là một quá trình khá dễ dàng.

nhập mô tả hình ảnh ở đây

Chỉ cần lấy một bộ các hình lục giác bạn có ở đó, tạo một hình chữ nhật khớp với hình màu cam mà tôi có trong hình trên (đảm bảo các góc bắt vào các điểm thích hợp trên các hình lục giác), sau đó sử dụng công cụ giao nhau để có được loại bỏ mọi thứ bên ngoài hình chữ nhật. Điều đó sẽ để lại cho bạn một mô hình có thể nghiêng.

Chỉnh sửa: Mỗi bình luận của horatio (cuộc gọi tốt!), Tôi hình dung mình nên giải thích cách tôi giải quyết trên hình chữ nhật cụ thể đó. Khi tạo một lát, bạn cần phải có từng phần của mẫu xuất hiện ít nhất một lần trong ô đã nói (và lý tưởng nhất là không quá một lần). Với mẫu này tôi đã xem liệu có bất kỳ điểm định kỳ nào trên trục x hoặc y không; may mắn thay cho tôi, các hình lục giác không ngồi ở một góc kỳ lạ, vì vậy điều này làm cho mọi thứ trở thành một nhiệm vụ tương đối dễ dàng.

nhập mô tả hình ảnh ở đây

Trên trục X, tôi chọn hai hình lục giác được căn chỉnh. Đây sẽ là sự bắt đầu và kết thúc của mô hình, theo chiều ngang. Tiếp theo tôi chọn một điểm phù hợp từ mỗi điểm (trong trường hợp này là điểm ngoài cùng bên trái). Điều này sẽ đánh dấu chiều rộng chính xác của hình chữ nhật cắt cho mẫu. Tiếp theo, tôi đã làm tương tự theo chiều dọc, sử dụng các điểm tôi đã chọn cho chiều rộng làm góc trên cùng của hình chữ nhật cắt của mẫu. Khi tôi tìm thấy các điểm thấp hơn phù hợp, hình chữ nhật cắt được xác định.

Bạn có thể sử dụng kỹ thuật này trên bất kỳ số lượng hình dạng. Bạn cũng có thể sử dụng nó trên các hình lục giác (hoặc các hình dạng khác) ở một góc, nhưng hãy nhớ rằng gạch sẽ trở nên lớn hơn đáng kể, tùy thuộc vào góc.


2
Nếu bạn có thể giải thích ý tưởng đằng sau cách bạn chọn khu vực hình chữ nhật, OP có thể có thể khái quát hóa điều này thành các hình dạng khác.
horatio

Bản cập nhật thực sự tốt. Giúp giải thích khái niệm.
Diode Dan

Thông minh! Rất vui vì tôi có thể giúp. :)
Chris Langford
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.