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

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

สำหรับตัวอย่างแรกที่คาดเดาได้ ตั้ง in="SourceGraphic" เลือกแผนที่ที่ตั้งชื่อสำหรับ in2 ระบุช่องแนวนอนและแนวตั้ง แล้วตั้ง color-interpolation-filters="sRGB" เอกสารการเลื่อนตำแหน่งของ MDN อธิบายอินพุตสองตัวและสูตรเลือกจุดตัวอย่าง รูปที่ดูงอบนจอไม่ได้กลายเป็นเส้นขอบใหม่ที่แก้ไขได้โดยอัตโนมัติ

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

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

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

หากเปลี่ยนตัวอย่างเฉพาะสี ใช้การเปลี่ยนสีด้วย feColorMatrix ส่วนการเลื่อนตำแหน่งตอบปัญหาเชิงพื้นที่ว่าควรเลือกจุดจากภาพเรนเดอร์ที่ใด

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

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

<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 อธิบายตัวควบคุมความถี่ อ็อกเทฟ seed และชนิด เราคงค่าเหล่านั้นไว้เพื่อให้การเปลี่ยน scale เป็นการเทียบความแรงบนแผนที่เดียวกัน

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

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

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

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

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

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

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

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

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

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

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

ปริภูมิทำงานเริ่มต้นของฟิลเตอร์คือ linearRGB แต่ตัวอย่างนี้ระบุ sRGB ชัดเจน สีที่เขียนเป็น rgb(50%,50%,50%) ไม่ได้มีค่าตัวเลข 0.5 หลังแปลงเป็น RGB เชิงเส้น เอกสาร color-interpolation-filters ของ MDN อธิบายค่าเริ่มต้นและตัวเลือกที่ระบุเอง

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

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

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

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

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

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

ผลเห็นได้ทั้งสองขนาด ภาพใหญ่ช่วยตรวจช่องและขอบง่ายขึ้น 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 อธิบายแอตทริบิวต์พื้นที่เหล่านี้ ผลรุนแรงกว่าอาจต้องใช้พื้นที่ต่างออกไป และ viewport รอบนอกอาจกำหนดขอบเขตอีกชั้น ใช้การตรวจการตัดของฟิลเตอร์และ viewport SVG หากขยายพื้นที่แล้วยังมีผลลัพธ์หาย

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

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

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

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

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

PNG ที่วางใน SVG เป็นอีกประเด็นหนึ่งต่างหาก ดูไฟล์ SVG ที่มีภาพแรสเตอร์ ก่อนคิดว่าชื่อไฟล์รับประกันเส้นโลโก้ที่แก้ไขได้

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

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

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

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

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

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

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

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

แหล่งข้อมูล

1. MDN: feDisplacementMap — อินพุตต้นฉบับและแผนที่ ช่อง และพฤติกรรมเลือกตัวอย่าง
2. W3C: ฟิลเตอร์เลื่อนตำแหน่ง — การจับคู่ย้อนกลับ สเกล และพิกัดองค์ประกอบ
3. MDN: feTurbulence — ตัวควบคุมแผนที่จากกระบวนการสร้างที่คงที่
4. MDN: feColorMatrix — ค่าช่องแผนที่ควบคุมที่ระบุชัด
5. MDN: color-interpolation-filters — linearRGB เริ่มต้นและ sRGB ที่กำหนดเอง
6. MDN: feFlood — แผนที่ควบคุมสีคงที่
7. MDN: filter — แอตทริบิวต์พื้นที่ฟิลเตอร์

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