> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# แผนที่เลื่อนตำแหน่ง SVG: บิดภาพตัวอย่างโลโก้

> ใช้ feDisplacementMap บิดตัวอย่างโลโก้ ควบคุมช่องสีและเทากลางใน sRGB ตรวจสองขนาด และเก็บเส้นต้นฉบับไว้ส่งงาน

Source: https://perfectvector.com/th/blog/svg-fedisplacementmap-artwork

Language: th
Author: Irene Kim
Published: 2026-10-01T08:00:00+09:00
Updated: 2026-10-01T08:00:00+09:00

ฟิลเตอร์ SVG `feDisplacementMap` บิดภาพที่ตัวเรนเดอร์แสดง โดยใช้ภาพอีกภาพเป็นแผนที่สำหรับเลือกจุดตัวอย่าง ข้อมูลเส้นต้นฉบับไม่เปลี่ยน ใช้กับตัวอย่างโลโก้ที่ย้อนกลับได้หรือภาพประกอบเว็บ และเก็บต้นฉบับหลักที่ไม่ใส่ฟิลเตอร์ไว้แก้ไขและส่งงาน

สำหรับตัวอย่างแรกที่คาดเดาได้ ตั้ง `in="SourceGraphic"` เลือกแผนที่ที่ตั้งชื่อสำหรับ `in2` ระบุช่องแนวนอนและแนวตั้ง แล้วตั้ง `color-interpolation-filters="sRGB"` [เอกสารการเลื่อนตำแหน่งของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) อธิบายอินพุตสองตัวและสูตรเลือกจุดตัวอย่าง รูปที่ดูงอบนจอไม่ได้กลายเป็นเส้นขอบใหม่ที่แก้ไขได้โดยอัตโนมัติ

## ตัดสินว่าต้องการไฟล์ใด

| เป้าหมาย                            | วิธีที่เหมาะ                      | สิ่งที่ต้องเก็บ                              |
| ----------------------------------- | --------------------------------- | -------------------------------------------- |
| ภาพบิดเบี้ยวคงที่บนเว็บเพจ          | สำเนาสำหรับแสดงที่ใส่ฟิลเตอร์     | ต้นฉบับเส้น SVG                              |
| โลโก้แก้ไขได้ที่เส้นขอบบิดอย่างถาวร | ตั้งใจแก้หรือสร้างรูปทรงใหม่      | รูปทรงเส้นใหม่ที่ตรวจแล้ว                    |
| ภาพตัวอย่างแรสเตอร์ที่หน้าตาคงที่   | เรนเดอร์สำเนาแสดงผลที่ขนาดต้องการ | ต้นฉบับสะอาดและไฟล์แรสเตอร์ส่งออกที่ตรวจแล้ว |
| รูปทรงผลิตงานพิมพ์หรือตัด           | เริ่มจากต้นฉบับไม่ใส่ฟิลเตอร์     | ขนาด ช่องว่าง และเส้นที่ทดสอบในปลายทาง       |

ตัวอย่างด้านล่างใช้ตราสี่เหลี่ยมที่เราสร้าง โดยเปิดตรงกลางไว้ ขอบตรงทำให้เปรียบเทียบการบิดได้ง่าย นี่เป็นลายสาธิต ไม่ใช่โลโก้ลูกค้าหรือผลจากเครื่องมือแปลงเวกเตอร์

**ตัวอย่างกับต้นฉบับแยกกัน**

![ภาพอธิบายตัวอย่างตราสีปะการังสามภาพที่เส้นขอบบิดเพิ่มขึ้น อยู่เหนือเส้นขอบต้นฉบับตรงที่เหมือนกัน](https://perfectvector.com/blog/svg-fedisplacementmap-artwork/displacement-states.webp)

*ภาพอธิบาย: ตราที่เห็นบิดได้ขณะที่เส้นขอบต้นฉบับไม่เปลี่ยน แผนภาพแนวคิดนี้ไม่ใช่ภาพหน้าจอเบราว์เซอร์ ไฟล์ส่งออกจากโปรแกรมแก้ไขจริง หรือผลการแปลง*

หากเปลี่ยนตัวอย่างเฉพาะสี ใช้[การเปลี่ยนสีด้วย feColorMatrix](https://perfectvector.com/th/blog/svg-fecolormatrix) ส่วนการเลื่อนตำแหน่งตอบปัญหาเชิงพื้นที่ว่าควรเลือกจุดจากภาพเรนเดอร์ที่ใด

## คัดลอกตัวอย่าง SVG คงที่ซึ่งควบคุมตัวแปรไว้

บันทึกโค้ดนี้เป็น SVG แล้วเปิดในเบราว์เซอร์ มีหนึ่งเส้น แหล่งนอยส์คงที่หนึ่งตัว เมทริกซ์ที่คงความแปรผันในช่องแนวนอนแต่ให้แนวตั้งเป็นกลาง และค่าสเกลเลื่อนตำแหน่ง `36`

```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="warp" x="-25%" y="-25%" width="150%" height="150%" primitiveUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.035"
                    numOctaves="1" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="1 0 0 0 0
        0 0 0 0 0.5
        0 0 0 0 0
        0 0 0 0 1" result="map"/>
      <feDisplacementMap in="SourceGraphic" in2="map" scale="36"
                         xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
  <path d="M42 42H158V158H42Z M78 78H122V122H78Z" fill="#e76b50" fill-rule="evenodd" filter="url(#warp)"/>
</svg>
```

`feTurbulence` ให้ความแปรผันจากกระบวนการสร้าง [เอกสารนอยส์ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) อธิบายตัวควบคุมความถี่ อ็อกเทฟ seed และชนิด เราคงค่าเหล่านั้นไว้เพื่อให้การเปลี่ยน `scale` เป็นการเทียบความแรงบนแผนที่เดียวกัน

เมทริกซ์เก็บช่องแดงของนอยส์ ตั้งเขียวเป็น `0.5` น้ำเงินเป็นศูนย์ และอัลฟาเป็นหนึ่ง ผลลัพธ์เป็นแผนที่ควบคุม ไม่ใช่ชุดสีใหม่ของตราปะการัง [เอกสารเมทริกซ์ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) อธิบายการแปลงช่อง จากนั้นแดงควบคุมการเลือกจุดแนวนอน ส่วนเขียวให้ระยะเยื้องแนวตั้งที่เป็นกลาง

หากต้องการเทียบความแรง ให้เปลี่ยนเฉพาะ `scale="36"` เป็น `scale="12"` แล้วเป็น `scale="0"` คงเส้น seed เมทริกซ์แผนที่ ปริภูมิสี และ viewBox ไว้เหมือนเดิม เพื่อแยกการตัดสินใจที่กำลังทำ

## อ่านสเกลเป็นระยะเยื้องจุดตัวอย่าง

สำหรับช่องแผนที่ที่เลือก ตำแหน่งเลือกตัวอย่างต้นฉบับคือ:

```text
sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)
```

[ข้อกำหนดการเลื่อนตำแหน่ง W3C](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) นิยามการจับคู่ย้อนกลับนี้ กล่าวคือแต่ละตำแหน่งผลลัพธ์ถามว่าควรเลือกตัวอย่างจากจุดใดในต้นฉบับ ระยะเยื้องตัวอย่างเป็นบวกไม่ได้สั่งให้ย้ายโหนดเส้นไปทิศนั้น

ที่สเกล `36` ช่องแนวนอนให้ระยะเยื้องตัวอย่างดังนี้:

| ค่าช่องในปริภูมิสีทำงานของฟิลเตอร์ | ระยะเยื้องตัวอย่างแนวนอน |
| ---------------------------------- | ------------------------ |
| `0`                                | `-18`                    |
| `0.5`                              | `0`                      |
| `1`                                | `+18`                    |

ตัวอย่างใช้ `primitiveUnits="userSpaceOnUse"` ค่าเหล่านี้จึงอ้างระบบพิกัดผู้ใช้ของ SVG ไม่ได้รับประกันระยะพิกเซล CSS หลังปรับขนาด viewBox ข้อกำหนดยังระบุว่าสเกล `0` ไม่มีผลเลื่อนตำแหน่ง

ค่าเขียวคงที่ทำให้การเลือกตัวอย่างแนวตั้งเป็นกลางในตัวอย่างนี้ หากต้องการสำรวจการบิดสองแกนภายหลัง ให้ตั้งใจเพิ่มความแปรผันในเขียวด้วย อย่าเปลี่ยนช่องและแผนที่พร้อมกันเมื่อวินิจฉัยผลที่ไม่คาดคิด

## ระบุปริภูมิสีให้ชัดสำหรับเทากลาง

เป็นกลางหมายถึงค่าช่องที่เลือก **0.5 ในปริภูมิทำงานที่แผนที่ใช้** ไม่ได้หมายความว่าตัวอย่างสีที่ดูเป็นเทากลางทุกสีจะเป็นกลางภายใต้ทุกการตั้งค่าฟิลเตอร์

ปริภูมิทำงานเริ่มต้นของฟิลเตอร์คือ `linearRGB` แต่ตัวอย่างนี้ระบุ `sRGB` ชัดเจน สีที่เขียนเป็น `rgb(50%,50%,50%)` ไม่ได้มีค่าตัวเลข 0.5 หลังแปลงเป็น RGB เชิงเส้น [เอกสาร color-interpolation-filters ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) อธิบายค่าเริ่มต้นและตัวเลือกที่ระบุเอง

สำหรับแผนที่คงที่เพื่อวินิจฉัย ให้แทนองค์ประกอบนอยส์และเมทริกซ์ด้วย:

```xml
<feFlood flood-color="rgb(50%,50%,50%)" result="map"/>
```

คงองค์ประกอบเลื่อนตำแหน่ง ตัวเลือกช่อง และ `sRGB` ที่ระบุไว้บนฟิลเตอร์ [เอกสาร feFlood ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) อธิบายภาพสีคงที่ที่ใช้ที่นี่ การควบคุมนี้ช่วยแยกความแปรผันแผนที่ออกจากการเลื่อนเพราะปริภูมิสี

ในไฟล์ทดสอบ Chrome ของเรา ตราที่ใช้แผนที่คงที่ sRGB ดูตรงกับตราที่ไม่ใส่ฟิลเตอร์ เมื่อลบการตั้งปริภูมิสีชัดเจน ตราแผนที่เทาเดิมขยับอย่างเห็นได้ชัด นี่เป็นข้อสังเกตในเบราว์เซอร์ ไม่ใช่คำกล่าวว่าทุกเอนจินเรนเดอร์ตรงกันทุกพิกเซล เก็บการตั้งปริภูมิสีเมื่อใช้วิธีนี้กับภาพของคุณ และตรวจกฎ CSS ที่อาจเขียนทับ

## ตรวจตราเดียวกันที่สองขนาด

เราเรนเดอร์ตราต้นฉบับใน Chrome ที่ **120 × 120** และ **300 × 300 พิกเซล CSS** แต่ละขนาดแสดงแผนที่คงที่เดิมที่สเกล `0`, `12` และ `36` โดยใช้ viewBox `0 0 200 200` เดียวกัน

| ความแรง | สิ่งที่เห็นจากไฟล์ทดสอบต้นฉบับ              | การตัดสินใจที่ช่วยได้     |
| ------- | ------------------------------------------- | ------------------------- |
| `0`     | ขอบนอกตรงและช่องเปิดสี่เหลี่ยม              | ฐานสำหรับเปรียบเทียบ      |
| `12`    | เส้นขอบแปรผันแนวนอนเล็กน้อย ช่องเปิดยังเห็น | การแต่งภาพแบบพอเหมาะ      |
| `36`    | ขอบนอกและช่องเปิดบิดแรงขึ้น                 | ตรวจว่ายังจำได้ก่อนส่งงาน |

ผลเห็นได้ทั้งสองขนาด ภาพใหญ่ช่วยตรวจช่องและขอบง่ายขึ้น DOM ของเบราว์เซอร์ยังมีหนึ่งเส้นในแต่ละตัวอย่างทั้งหก โดยค่า `d` เหมือนกัน การควบคุมเพิ่มเติมขนาด 200 พิกเซลสามตัวเทียบตราไม่ใส่ฟิลเตอร์กับแผนที่เทาคงที่ใน sRGB ที่ระบุเองและ linearRGB เริ่มต้น

นี่เป็นตัวอย่าง SVG ที่สร้างขึ้นอย่างอิสระ ยืนยันว่าไฟล์นี้ทำอะไรในเบราว์เซอร์ที่ทดสอบและรูปทรงต้นฉบับไม่เปลี่ยน ไม่ใช่การทดสอบโปรแกรมแก้ไขจริง ผล PerfectVector หรือการสำรวจความเข้ากันได้

สำหรับโลโก้ของคุณ ให้ตรวจขนาดแสดงจริงที่เล็กที่สุดก่อน ช่องหรือมุมที่บิดอาจเปลี่ยนวิธีอ่านตรา แม้ต้นฉบับสะอาดยังอยู่ครบ

## วินิจฉัยภาพเลื่อน ผลอ่อน หรือขอบถูกตัด

**ทั้งตราเลื่อนแทนที่จะงอ** ทดสอบแผนที่คงที่ที่ระบุ sRGB ตรวจช่องที่เลือกและดูว่าแผนที่แปรผันในช่องเหล่านั้นจริงหรือไม่ ค่าที่เลือกซึ่งคงที่และไม่เป็นกลางสร้างระยะเยื้องตัวอย่างเท่ากันทั่วภาพ

**ผลยังอ่อน** ยืนยันว่า `in2="map"` ตรงกับ `result` ที่ตั้งชื่อในเมทริกซ์ ค่อย ๆ เพิ่มสเกลโดยใช้ seed และความถี่เดิม แล้วลองแผนที่อื่นหากจำเป็น seed ใหม่เปลี่ยนลายเชิงพื้นที่ จึงเป็นการเปรียบเทียบอีกชุด

**ขอบแนวตั้งทำงานผิดคาด** ตัวอย่างนี้ออกแบบให้เลื่อนแนวนอนด้วย `xChannelSelector="R"` และ `yChannelSelector="G"` โดยตรึง G ที่ 0.5 ตรวจแถวเมทริกซ์และการสะกดชื่อช่องก่อนเพิ่มความแปรผันสองแกน

**เส้นขอบที่บิดถูกตัดทิ้ง** ตรวจพื้นที่ฟิลเตอร์ก่อนแก้เส้นต้นฉบับ ตัวอย่างเผื่อพื้นที่ด้วย `x="-25%"`, `y="-25%"` และความกว้างสูง `150%` [เอกสาร filter ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) อธิบายแอตทริบิวต์พื้นที่เหล่านี้ ผลรุนแรงกว่าอาจต้องใช้พื้นที่ต่างออกไป และ viewport รอบนอกอาจกำหนดขอบเขตอีกชั้น ใช้[การตรวจการตัดของฟิลเตอร์และ viewport SVG](https://perfectvector.com/th/blog/svg-shadow-clipped) หากขยายพื้นที่แล้วยังมีผลลัพธ์หาย

**SVG สูญเสียผลเมื่อไปปลายทางอื่น** เปิดไฟล์ที่ส่งจริงในปลายทางนั้น ตัวอย่างเบราว์เซอร์ไม่ได้ยืนยันพฤติกรรมโปรแกรมแก้ไข ตัวส่งออก PDF หรือเครื่องตัด เก็บต้นฉบับสะอาดไว้แทนการรับปากว่าฟิลเตอร์จะย้ายไปโดยไม่เปลี่ยน

## ส่งต้นฉบับสะอาดแยกต่างหาก

สำหรับเวอร์ชันไม่ใส่ฟิลเตอร์ ลบ `filter="url(#warp)"` จากเส้นและลบนิยามฟิลเตอร์ที่ไม่ใช้ คง `d` เดิม `fill-rule="evenodd"` สีเติม และ viewBox เปิดผลลัพธ์และยืนยันว่าช่องสี่เหลี่ยมกับขอบตรงตรงกับฐานสะอาด

ใช้ชื่อไฟล์แยกสำหรับต้นฉบับสะอาดและภาพแต่งสำหรับแสดง หากใช้ SVG ใส่ฟิลเตอร์ซ้ำแบบ inline ในหน้าเดียว ให้แต่ละฟิลเตอร์มี ID ไม่ซ้ำและปรับการอ้าง `url(#...)` ตรวจวิธีฝังสุดท้ายและเบราว์เซอร์ที่ตั้งใจรองรับ

หากต้องการให้เส้นขอบบิดสุดท้ายแก้ไขได้เอง ให้เตรียมรูปทรงนั้นเป็นงานออกแบบแยก ฟิลเตอร์นี้ไม่ได้ตรึงตัวอย่างเป็นคำสั่งเส้นใหม่ การลอกภาพตัวอย่างที่แรสเตอร์ก็เป็นการแปลงใหม่ที่ต้องตรวจความแม่นยำและเก็บงานเอง ไม่ได้กู้ต้นฉบับที่ไม่เปลี่ยนทางคณิตศาสตร์

PNG ที่วางใน SVG เป็นอีกประเด็นหนึ่งต่างหาก ดู[ไฟล์ SVG ที่มีภาพแรสเตอร์](https://perfectvector.com/th/blog/svg-contains-raster-image) ก่อนคิดว่าชื่อไฟล์รับประกันเส้นโลโก้ที่แก้ไขได้

## เมื่อใดการแปลงโลโก้เป็นเวกเตอร์ช่วยได้

หากโลโก้สะอาดต้นฉบับเหลือเพียง PNG หรือ JPG ให้[แปลงโลโก้ต้นทางเป็นเวกเตอร์](https://perfectvector.com/th/vectorize-logo) แล้วตรวจเงารูปร่าง ช่อง และบริเวณสีที่แก้ไขได้ก่อนเพิ่มฟิลเตอร์แสดง PerfectVector จัดการแรสเตอร์เป็นเวกเตอร์ ส่วนกราฟการเลื่อนตำแหน่งในคู่มือนี้เป็นการแต่ง SVG แยก ไม่ได้เปลี่ยนตัวอย่างบิดให้เป็นเส้นขอบพร้อมผลิตที่รับประกันได้

หากมีต้นฉบับเส้นสะอาดอยู่แล้ว ให้ใช้ไฟล์นั้นโดยตรง สำหรับเตรียมต้นฉบับและเก็บโลโก้ [คู่มือแปลงโลโก้เป็นเวกเตอร์](https://perfectvector.com/th/blog/how-to-vectorize-a-logo) ครอบคลุมการกู้รูปทรงแทนการบิดในเบราว์เซอร์

## คำถามที่พบบ่อย

**feDisplacementMap เปลี่ยนเส้น SVG หรือไม่?**
ฟิลเตอร์นี้เปลี่ยนภาพเรนเดอร์ผ่านการเลือกตัวอย่างตามแผนที่ ในไฟล์ทดสอบเบราว์เซอร์ต้นฉบับ ตัวอย่างความแรงทั้งหกเก็บหนึ่งเส้นที่มีค่า d เหมือนกัน

**ทำไมแผนที่เลื่อนตำแหน่งสีเทายังทำให้ภาพขยับ?**
เป็นกลางคือค่าช่อง 0.5 ในปริภูมิสีทำงานของแผนที่ เทา 50% sRGB ไม่ได้มีค่าตัวเลข 0.5 หลังแปลงเป็น linearRGB เริ่มต้น ใช้การกำหนดปริภูมิสีชัดเจนและการทดสอบแผนที่คงที่ที่ควบคุมไว้

**สเกล 36 ในตัวอย่างหมายถึงอะไร?**
เมื่อหน่วยองค์ประกอบเป็น userSpaceOnUse ค่าช่องที่เลือกตั้งแต่ 0 ถึง 1 ให้ระยะเยื้องตัวอย่างตั้งแต่ -18 ถึง +18 หน่วยผู้ใช้ SVG ระยะที่เห็นขึ้นกับการปรับขนาด viewBox ของ SVG

**ส่ง SVG บิดตรงเข้าเครื่องตัดได้หรือไม่?**
การบิดที่เห็นไม่ใช่รูปทรงตัดใหม่ที่แก้ไขได้ เก็บต้นฉบับเส้นไม่ใส่ฟิลเตอร์และตรวจปลายทางจริง หากงานต้องใช้เส้นขอบบิดถาวรให้เตรียมแยก

## แหล่งข้อมูล

1. [MDN: feDisplacementMap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) — อินพุตต้นฉบับและแผนที่ ช่อง และพฤติกรรมเลือกตัวอย่าง
2. [W3C: ฟิลเตอร์เลื่อนตำแหน่ง](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) — การจับคู่ย้อนกลับ สเกล และพิกัดองค์ประกอบ
3. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — ตัวควบคุมแผนที่จากกระบวนการสร้างที่คงที่
4. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — ค่าช่องแผนที่ควบคุมที่ระบุชัด
5. [MDN: color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) — linearRGB เริ่มต้นและ sRGB ที่กำหนดเอง
6. [MDN: feFlood](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) — แผนที่ควบคุมสีคงที่
7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — แอตทริบิวต์พื้นที่ฟิลเตอร์

หากต้นฉบับสะอาดมีเพียงแรสเตอร์ ให้[แปลงโลโก้ของคุณเป็น SVG](https://perfectvector.com/th/vectorize-logo) ตรวจเงารูปร่างและช่อง แล้วบันทึกต้นฉบับนั้นก่อนสร้างสำเนาแสดงที่บิดแยกต่างหาก

## Explore

- [Read the HTML article](https://perfectvector.com/th/blog/svg-fedisplacementmap-artwork)
- [Image Trace ใน Illustrator เป็นสีเทา: ตรวจวัตถุ](https://perfectvector.com/th/blog/illustrator-image-trace-greyed-out.md)
- [ภาพ SVG ใน fpdf2: เก็บพาธใน PDF จาก Python](https://perfectvector.com/th/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)