SVG图案生成器
SVG图案生成器工具
關於 SVG 圖案產生器
SVG 圖案產生器透過定義填滿單一重複形狀的 SVG <pattern> 元素，建立重複的拼貼背景。它提供六種形狀類型（圓形、正方形、三角形、線條、十字、菱形），以輪廓基本圖形繪製，然後在 200x200 的預覽中拼貼它們，並匯出完整的 SVG 標記，可用於網頁、CSS 背景或設計檔案。
使用方法
1. 從六個按鈕選項中選擇圖案類型。 2. 調整尺寸滑桿（10 到 60px），同時設定拼貼尺寸和形狀比例。 3. 調整筆觸寬度滑桿（0.5 到 6.0）。 4. 使用旋轉（0 到 360 度，每次 5 度）透過 patternTransform 旋轉拼貼。 5. 使用兩個色塊設定形狀顏色和背景顏色。 6. 點擊複製以將生成的 SVG 複製到剪貼簿。
圖案輸出格式
匯出的 SVG 為 200x200，包含使用 patternUnits="userSpaceOnUse" 的 <defs><pattern> 區塊。圖案的寬度和高度等於尺寸值，因此每個拼貼以該尺寸的網格重複。先繪製填滿背景顏色的背景 <rect>，然後以填滿 url(#pat) 的第二個 <rect> 覆蓋拼貼。當旋轉不為零時，旋轉同時套用為圖案上的 patternTransform 和形狀本身的 rotate() 轉換。
▶形狀是填滿的還是輪廓的？
輪廓的。每個形狀都以 fill="none" 生成，並使用筆觸寬度和形狀顏色作為其輪廓，因此背景會透過內部顯示。
▶為什麼畫布只有 200x200？
預覽和匯出的 SVG 固定為 200x200 像素。由於輸出使用拼貼圖案，您可以在 CSS 中放大它，或從另一個 SVG 參考圖案元素來填滿任何區域。
▶旋轉實際上旋轉了什麼？
它同時在圖案元素上套用 patternTransform="rotate(N)"，以及在內部形狀上套用 rotate(N size/2 size/2) 轉換，因此每個單獨的圖案在其拼貼內旋轉，整個拼貼也隨之旋轉。
▶我的資料會傳送到伺服器嗎？
不會。所有處理都在瀏覽器本地進行。你的輸入永遠不會離開你的裝置。
如果这个工具对你有帮助，请考虑请我喝杯咖啡。
請幫我買杯咖啡吧。