> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Bản đồ dịch chuyển SVG: làm méo bản xem trước logo > Dùng feDisplacementMap SVG để làm méo bản xem trước logo, điều khiển kênh và xám trung tính trong sRGB, kiểm tra hai kích thước và giữ bản chính đường dẫn gốc để bàn giao. Source: https://perfectvector.com/vi/blog/svg-fedisplacementmap-artwork Language: vi Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 Bộ lọc SVG `feDisplacementMap` làm méo hình ảnh mà bộ kết xuất hiển thị bằng cách dùng một ảnh khác làm bản đồ lấy mẫu. Nó giữ nguyên dữ liệu đường dẫn nguồn. Hãy dùng cho bản xem trước logo có thể hoàn nguyên hoặc hình minh họa web, và giữ một bản chính không có bộ lọc để chỉnh sửa và bàn giao. Để có ví dụ đầu tiên dễ dự đoán, đặt `in="SourceGraphic"`, chọn bản đồ được đặt tên cho `in2`, chỉ định kênh ngang và dọc, rồi đặt `color-interpolation-filters="sRGB"`. [Tài liệu tham khảo về dịch chuyển của MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) giải thích hai đầu vào và công thức lấy mẫu. Một hình trông bị uốn trên màn hình không tự động trở thành đường viền mới có thể chỉnh sửa. ## Quyết định bạn cần tệp nào | Mục tiêu | Cách làm phù hợp | Nội dung cần giữ | | ------------------------------------------------------ | ------------------------------------------------ | ------------------------------------------------ | | Hình bị làm méo tĩnh trên trang web | Bản sao hiển thị có bộ lọc | Bản chính đường dẫn SVG gốc | | Logo có thể chỉnh sửa với đường bao được uốn vĩnh viễn | Chủ đích chỉnh sửa hoặc dựng lại hình học | Hình học đường dẫn mới đã xác minh | | Bản xem trước raster có hình thức cố định | Kết xuất bản sao hiển thị ở kích thước cần thiết | Bản chính sạch cùng bản xuất raster đã kiểm tra | | Hình học sản xuất để in hoặc cắt | Bắt đầu từ bản chính không có bộ lọc | Kích thước, lỗ và đường dẫn đã kiểm thử tại đích | Ví dụ bên dưới dùng một huy hiệu vuông do chúng tôi tạo với phần giữa để trống. Các cạnh thẳng giúp dễ so sánh độ méo. Đây là họa tiết minh họa, không phải logo của khách hàng hay đầu ra từ công cụ vector hóa. **Bản xem trước tách biệt với nguồn** ![Minh họa ba bản xem trước huy hiệu màu san hô có độ méo đường bao tăng dần phía trên các đường viền nguồn thẳng giống hệt nhau](https://perfectvector.com/blog/svg-fedisplacementmap-artwork/displacement-states.webp) *Minh họa: huy hiệu hiển thị có thể bị méo trong khi đường viền nguồn vẫn giữ nguyên. Sơ đồ khái niệm này không phải ảnh chụp trình duyệt, bản xuất từ trình chỉnh sửa gốc hay kết quả chuyển đổi.* Để chỉ đổi màu bản xem trước, dùng [đổi màu bằng feColorMatrix](https://perfectvector.com/vi/blog/svg-fecolormatrix). Dịch chuyển giải quyết vấn đề không gian: ảnh kết xuất được lấy mẫu ở đâu. ## Sao chép ví dụ SVG tĩnh có kiểm soát Lưu mã này thành SVG và mở trong trình duyệt. Nó chứa một đường dẫn, một nguồn nhiễu cố định, một ma trận giữ kênh ngang biến thiên trong khi giữ kênh dọc trung tính, cùng tỷ lệ dịch chuyển `36`. ```xml ``` `feTurbulence` cung cấp biến thiên được tạo theo thủ tục. [Tài liệu tham khảo về nhiễu của MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) mô tả các tùy chọn tần số, số octave, seed và loại. Ở đây chúng tôi giữ các giá trị đó cố định để khi đổi `scale`, bạn so sánh cường độ trên cùng bản đồ. Ma trận giữ kênh đỏ của nhiễu, đặt xanh lá thành `0.5`, xanh lam thành 0 và alpha thành 1. Đầu ra của nó là bản đồ điều khiển, không phải bảng màu mới cho huy hiệu màu san hô. [Tài liệu tham khảo về ma trận của MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) giải thích phép biến đổi kênh. Kênh đỏ sau đó điều khiển lấy mẫu ngang, còn xanh lá đóng góp độ lệch dọc trung tính. Để so sánh cường độ, chỉ đổi `scale="36"` thành `scale="12"` rồi `scale="0"`. Giữ nguyên đường dẫn, seed, ma trận bản đồ, không gian màu và viewBox. Cách này cô lập lựa chọn bạn đang đánh giá. ## Hiểu scale là độ lệch lấy mẫu Với các kênh bản đồ được chọn, vị trí lấy mẫu nguồn là: ```text sampleX = x + scale × (horizontalChannel - 0.5) sampleY = y + scale × (verticalChannel - 0.5) ``` [Đặc tả dịch chuyển của W3C](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) định nghĩa phép ánh xạ ngược này: mỗi vị trí đầu ra hỏi cần lấy mẫu nguồn ở đâu. Độ lệch lấy mẫu dương không phải chỉ dẫn di chuyển một nút đường dẫn theo hướng đó. Ở tỷ lệ `36`, kênh ngang tạo các độ lệch lấy mẫu sau: | Giá trị kênh trong không gian màu làm việc của bộ lọc | Độ lệch lấy mẫu ngang | | ----------------------------------------------------- | --------------------- | | `0` | `-18` | | `0.5` | `0` | | `1` | `+18` | Ví dụ dùng `primitiveUnits="userSpaceOnUse"`, nên các giá trị này tham chiếu đến hệ tọa độ người dùng của SVG. Chúng không được bảo đảm là khoảng cách pixel CSS sau khi viewBox được co giãn. Đặc tả cũng định nghĩa tỷ lệ `0` là không có hiệu ứng dịch chuyển. Giá trị xanh lá cố định giữ việc lấy mẫu dọc trung tính trong ví dụ này. Để khám phá độ méo hai trục sau đó, hãy chủ đích thêm biến thiên ở xanh lá. Đừng đổi đồng thời các kênh và bản đồ khi chẩn đoán kết quả ngoài dự kiến. ## Chỉ rõ không gian màu cho xám trung tính Trung tính nghĩa là giá trị kênh được chọn bằng **0,5 trong không gian làm việc dùng cho bản đồ**. Điều này không có nghĩa mọi ô màu trông xám vừa đều trung tính ở mọi thiết lập bộ lọc. Không gian làm việc mặc định của bộ lọc là `linearRGB`, trong khi ví dụ này dùng `sRGB` một cách rõ ràng. Màu được viết là `rgb(50%,50%,50%)` không có giá trị số 0,5 sau khi chuyển sang RGB tuyến tính. [Tài liệu tham khảo color-interpolation-filters của MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) mô tả giá trị mặc định và các lựa chọn tường minh. Để có bản đồ hằng phục vụ chẩn đoán, thay phần tử tạo nhiễu và ma trận bằng: ```xml ``` Giữ phần tử dịch chuyển, các bộ chọn kênh và `sRGB` tường minh trên bộ lọc. [Tài liệu tham khảo feFlood của MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) mô tả ảnh màu không đổi dùng ở đây. Đối chứng này giúp phân biệt biến thiên của bản đồ với sự dịch chuyển do không gian màu. Trong mẫu kiểm thử Chrome của chúng tôi, huy hiệu dùng bản đồ hằng sRGB trông thẳng hàng với huy hiệu không có bộ lọc. Bỏ thiết lập không gian màu tường minh khiến cùng huy hiệu với bản đồ xám đó dịch chuyển thấy rõ. Đây là quan sát trong trình duyệt, không phải khẳng định kết xuất giống nhau từng pixel giữa các bộ máy. Giữ thiết lập không gian màu khi áp dụng công thức này cho hình của bạn; kiểm tra các quy tắc CSS ghi đè nó. ## Kiểm tra cùng huy hiệu ở hai kích thước Chúng tôi kết xuất huy hiệu gốc ở **120 × 120** và **300 × 300 pixel CSS** trong Chrome. Mỗi kích thước hiển thị cùng bản đồ cố định ở các tỷ lệ `0`, `12` và `36`, dùng cùng viewBox `0 0 200 200`. | Cường độ | Quan sát trong mẫu gốc | Quyết định được hỗ trợ | | -------- | ---------------------------------------------------------- | ---------------------------------------------- | | `0` | Cạnh ngoài thẳng và khoảng trống vuông | Mốc chuẩn để so sánh | | `12` | Đường bao biến thiên ngang nhẹ; khoảng trống vẫn nhìn thấy | Hiệu ứng hiển thị vừa phải | | `36` | Cạnh ngoài và khoảng trống bị méo mạnh hơn | Kiểm tra khả năng nhận diện trước khi bàn giao | Hiệu ứng nhìn thấy ở cả hai kích thước; bản xem trước lớn hơn giúp kiểm tra lỗ và cạnh dễ hơn. DOM trình duyệt vẫn chứa một đường dẫn trong mỗi mẫu của sáu mẫu, với các giá trị `d` giống hệt. Ba đối chứng bổ sung 200 pixel so sánh huy hiệu không có bộ lọc với bản đồ xám hằng trong sRGB tường minh và linearRGB mặc định. Đây là các mẫu SVG được tạo độc lập. Chúng xác lập hành vi của mẫu này trong trình duyệt đã kiểm thử và việc hình học nguồn không thay đổi. Chúng không phải kiểm thử trình chỉnh sửa gốc, đầu ra PerfectVector hay khảo sát tương thích. Với logo của bạn, trước tiên hãy kiểm tra kích thước hiển thị thực tế nhỏ nhất. Một khoảng trống hay góc bị méo có thể thay đổi cách người xem nhận ra biểu trưng dù bản chính sạch vẫn nguyên vẹn. ## Chẩn đoán dịch chuyển, hiệu ứng yếu hoặc cạnh bị cắt **Toàn bộ huy hiệu dịch chuyển thay vì uốn cong.** Thử đối chứng bản đồ hằng với sRGB tường minh. Kiểm tra các kênh được chọn và xem bản đồ có thực sự biến thiên trong các kênh đó không. Một giá trị được chọn không đổi nhưng không trung tính tạo ra độ lệch lấy mẫu đồng đều. **Hiệu ứng vẫn yếu.** Xác nhận `in2="map"` khớp với tên `result` của ma trận. Tăng tỷ lệ dần với cùng seed và tần số. Sau đó, nếu cần, thử một bản đồ khác. Seed mới thay đổi mẫu không gian, nên đó là phép so sánh riêng. **Cạnh dọc có hành vi bất ngờ.** Ví dụ này được thiết kế cho dịch chuyển ngang: `xChannelSelector="R"` và `yChannelSelector="G"`, với G cố định ở 0,5. Kiểm tra hàng ma trận và cách viết tên kênh trước khi thêm biến thiên hai trục. **Đường bao bị uốn bị cắt mất.** Kiểm tra vùng bộ lọc trước khi sửa đường dẫn nguồn. Ví dụ chừa thêm chỗ bằng `x="-25%"`, `y="-25%"` cùng chiều rộng và chiều cao `150%`. [Tài liệu tham khảo filter của MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) mô tả những thuộc tính vùng đó. Hiệu ứng mạnh hơn có thể cần vùng khác, và khung nhìn bao quanh có thể áp đặt một ranh giới riêng. Làm theo [các bước kiểm tra cắt xén bộ lọc và khung nhìn SVG](https://perfectvector.com/vi/blog/svg-shadow-clipped) nếu tăng vùng không khôi phục phần đầu ra bị mất. **SVG mất hiệu ứng ở nơi nhận khác.** Mở đúng tệp đã bàn giao ở nơi đó. Bản xem trước trong trình duyệt không xác lập hành vi của trình chỉnh sửa, bộ xuất PDF hay máy cắt. Giữ sẵn bản chính sạch thay vì hứa rằng bộ lọc sẽ được chuyển nguyên vẹn. ## Bàn giao bản chính sạch riêng Để có phiên bản không dùng bộ lọc, xóa `filter="url(#warp)"` khỏi đường dẫn và xóa định nghĩa bộ lọc không còn dùng. Giữ nguyên `d` gốc, `fill-rule="evenodd"`, màu tô và viewBox. Mở tệp kết quả và xác nhận khoảng trống vuông cùng các cạnh thẳng khớp với bản chuẩn sạch. Dùng tên tệp riêng cho bản chính sạch và phiên bản có hiệu ứng hiển thị. Nếu lặp SVG có bộ lọc dưới dạng nội tuyến trên một trang, hãy đặt ID riêng cho từng bộ lọc và cập nhật tham chiếu `url(#...)`. Kiểm tra phương thức nhúng cuối cùng và các trình duyệt bạn dự định hỗ trợ. Nếu bản thân đường viền bị méo cuối cùng phải có thể chỉnh sửa, hãy chuẩn bị hình học đó như một công việc đồ họa riêng. Bộ lọc này không cố định bản xem trước thành các lệnh đường dẫn mới. Đồ lại bản xem trước đã raster hóa cũng là một lần chuyển đổi mới với các bước kiểm tra độ chính xác và dọn dẹp riêng; nó không khôi phục bản chính gốc vốn không thay đổi về mặt toán học. PNG được đặt bên trong SVG lại là một khác biệt hoàn toàn khác. Xem [các tệp SVG chứa ảnh raster](https://perfectvector.com/vi/blog/svg-contains-raster-image) trước khi cho rằng tên tệp bảo đảm có các đường dẫn logo chỉnh sửa được. ## Khi nào vector hóa logo hữu ích Nếu logo gốc sạch chỉ còn ở dạng PNG hoặc JPG, hãy [vector hóa logo nguồn đó](https://perfectvector.com/vi/vectorize-logo), rồi kiểm tra dáng bao, lỗ và các vùng màu có thể chỉnh sửa trước khi thêm bộ lọc hiển thị. PerfectVector xử lý chuyển raster thành vector; sơ đồ dịch chuyển trong hướng dẫn này là một cách xử lý SVG riêng. Nó không biến bản xem trước bị méo thành đường viền được bảo đảm dùng cho sản xuất. Nếu đã có bản chính đường dẫn sạch, hãy dùng tệp đó trực tiếp. Với chuẩn bị nguồn và dọn dẹp logo, [hướng dẫn vector hóa logo](https://perfectvector.com/vi/blog/how-to-vectorize-a-logo) trình bày bước khôi phục thay vì làm méo trong trình duyệt. ## Câu hỏi thường gặp **feDisplacementMap có thay đổi các đường dẫn SVG của tôi không?** Bộ lọc này thay đổi ảnh được kết xuất thông qua lấy mẫu theo bản đồ. Trong mẫu kiểm thử trình duyệt gốc, sáu mẫu cường độ giữ một đường dẫn có các giá trị d giống hệt nhau. **Tại sao bản đồ dịch chuyển xám vẫn làm hình của tôi di chuyển?** Trung tính là giá trị kênh 0,5 trong không gian màu làm việc của bản đồ. Màu xám sRGB 50% không có giá trị số 0,5 sau khi chuyển sang không gian linearRGB mặc định. Dùng thiết lập không gian màu tường minh và phép thử bản đồ hằng có kiểm soát. **Scale 36 trong ví dụ này nghĩa là gì?** Với đơn vị phần tử userSpaceOnUse, giá trị kênh được chọn từ 0 đến 1 cho độ lệch lấy mẫu từ -18 đến +18 đơn vị người dùng SVG. Khoảng cách hiển thị phụ thuộc vào việc co giãn viewBox của SVG. **Tôi có thể đưa SVG bị méo thẳng cho máy cắt không?** Độ méo hiển thị không phải hình học cắt mới có thể chỉnh sửa. Giữ bản chính đường dẫn không có bộ lọc và kiểm tra đích thực tế; chuẩn bị đường bao được uốn vĩnh viễn riêng nếu công việc cần chúng. ## Nguồn tham khảo 1. [MDN: feDisplacementMap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) — Đầu vào nguồn và bản đồ, các kênh và hành vi lấy mẫu. 2. [W3C: Bộ lọc dịch chuyển](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) — Ánh xạ ngược, tỷ lệ và tọa độ phần tử. 3. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Các tùy chọn bản đồ thủ tục cố định. 4. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Giá trị kênh tường minh của bản đồ điều khiển. 5. [MDN: color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) — linearRGB mặc định và sRGB tường minh. 6. [MDN: feFlood](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) — Đối chứng bản đồ màu không đổi. 7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Các thuộc tính vùng bộ lọc. Nếu bản gốc sạch chỉ tồn tại ở dạng raster, hãy [chuyển logo của bạn thành SVG](https://perfectvector.com/vi/vectorize-logo), kiểm tra dáng bao và lỗ, rồi lưu bản chính đó trước khi tạo một bản sao hiển thị bị méo riêng. ## Explore - [Read the HTML article](https://perfectvector.com/vi/blog/svg-fedisplacementmap-artwork) - [Image Trace bị mờ trong Illustrator: kiểm tra đối tượng](https://perfectvector.com/vi/blog/illustrator-image-trace-greyed-out.md) - [Ảnh SVG trong fpdf2: Giữ đường dẫn trong PDF Python](https://perfectvector.com/vi/blog/fpdf2-svg-image.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)