Công cụ Tạo Mẫu SVG

Trình tạo mẫu SVG tạo ra các nền xếp lát lặp lại bằng cách định nghĩa một phần tử SVG <pattern> được lấp đầy bằng một hình dạng lặp lại duy nhất. Nó cung cấp sáu loại hình (vòng tròn, hình vuông, hình tam giác, đường thẳng, dấu thập, hình thoi) được vẽ dưới dạng nguyên thủy đường viền, sau đó xếp lát chúng lên bản xem trước 200x200 và xuất toàn bộ đánh dấu SVG để sử dụng trong các trang web, nền CSS hoặc tệp thiết kế.

1. Chọn một Loại mẫu từ sáu lựa chọn nút. 2. Điều chỉnh thanh trượt Kích thước (từ 10 đến 60px) để đặt cả kích thước lát và tỷ lệ hình. 3. Điều chỉnh thanh trượt Độ dày nét (từ 0,5 đến 6,0). 4. Sử dụng Xoay (từ 0 đến 360 độ, theo bước 5 độ) để xoay lát thông qua patternTransform. 5. Đặt Màu hình và Màu nền bằng hai mẫu màu. 6. Nhấp vào Sao chép để sao chép SVG đã tạo vào bảng tạm.

SVG được xuất có kích thước 200x200 với khối <defs><pattern> sử dụng patternUnits="userSpaceOnUse". Chiều rộng và chiều cao của mẫu bằng với giá trị Kích thước, do đó mỗi lát lặp lại trên một lưới có kích thước đó. Đầu tiên một <rect> nền được tô bằng Màu nền được vẽ, sau đó một <rect> thứ hai được tô bằng url(#pat) phủ lên các lát. Khi Xoay khác không, phép xoay được áp dụng cả dưới dạng patternTransform trên mẫu và dưới dạng phép biến đổi rotate() trên chính hình.