⚡全部工具 💻開發者與編碼 📝文字與內容 🎨設計與色彩 🖼️圖片與多媒體 🔢數據與計算 🔒安全與密碼 📄PDF 工具 📐單位與進度轉換

視覺化 SVG Path 編輯器

在 500×500 畫布上用鋼筆工具點出錨點、拖曳貝茲控制手把，即時產生 SVG Path 的 d 屬性與 CSS clip-path: path() 程式碼，附愛心、星星等模板。

🎨 SVG 繪圖畫布 (500x500)

⚙️ 路徑設定與控制

工具模式

節點類型

格線對齊 (Snap to Grid) 閉合路徑 (Z)

預設路徑模板

📤 代碼匯出與同步

SVG Path d 屬性代碼

CSS clip-path 屬性

📖 SVG Path 繪製指南

在「鋼筆加點」模式點擊畫布即可新增錨點，新增的點預設是曲線（C）。拖曳綠色四葉草錨點可移動節點，拖曳藍色控制手把可調整貝茲曲線弧度；在「刪除節點」模式點擊錨點即可刪除。完成後複製 d 屬性或 clip-path 程式碼即可使用，所有運算都在瀏覽器內完成。

使用方式

1 開啟視覺化 SVG Path 編輯器，輸入、貼上或選擇要處理的內容。
2 依需求調整頁面上的選項與格式。
3 確認即時結果，再複製或下載可用的輸出。

適合的使用情境

在 500×500 畫布上用鋼筆工具點出錨點、拖曳貝茲控制手把，即時產生 SVG Path 的 d 屬性與 CSS clip-path: path() 程式碼，附愛心、星星等模板。適合日常工作、開發、學習或快速驗證時使用。

隱私與資料處理

工具在瀏覽器中運作；處理敏感資料前，仍請確認瀏覽器與裝置環境可信。

視覺化 SVG Path 編輯器：用滑鼠畫出路徑並產生 d 屬性與 clip-path

SVG 的 path 元素用一串 d 屬性描述形狀，例如「M 100 100 C 150 50 …」，手寫這些座標和貝茲曲線控制點非常容易出錯。這個編輯器提供一塊 500 × 500 的畫布，讓你用點擊和拖曳的方式畫出路徑，右側會即時產生對應的 SVG d 代碼與 CSS clip-path: path() 規則。適合用來做圖示、Logo 草稿、不規則的圖片裁切形狀，或是學習 SVG 路徑指令到底如何運作。

在「鋼筆加點」模式下點擊畫布就會新增錨點：第一個點是起點（M），之後的點預設為曲線節點（C），各自帶有兩個藍色的控制把手。切換到「選取/編輯」模式後，可以拖曳綠色的四葉草錨點移動節點，或拖曳把手調整曲線彎曲的方向與幅度；選取節點後，也能在「節點類型」把它改成直線節點（L）或曲線節點（C）。「刪除節點」模式則是點一下錨點就移除。畫布支援滑鼠、觸控板與觸控螢幕操作。

開啟「格線對齊」後，錨點會吸附到每 20 像素一格的格線上，方便畫出對稱或整齊的形狀；格線背景可以隨時開關。勾選「閉合路徑 (Z)」會把終點連回起點，形成可以填色的封閉圖形。如果不想從零開始，可以套用愛心、星星、水滴或 Alpa 大頭等預設模板再修改。所有座標都會取整數，產生的代碼簡潔、可以直接貼進程式碼。

輸出的 d 屬性以 0 到 500 的座標系統為準，放進 SVG 時請搭配 viewBox="0 0 500 500"，圖形就能隨 SVG 尺寸等比例縮放。CSS 的 clip-path: path() 則不同，它的座標單位是像素，不會跟著元素大小縮放，最適合用在 500 × 500 像素的元素上；需要響應式裁切時，建議改用 SVG 的 clipPath 搭配 clipPathUnits，或用 transform 縮放元素。整個編輯過程都在瀏覽器中進行，不需要上傳任何資料。