ข้อความ SVG ตามพาธ: สร้างตัวอักษรตราสัญลักษณ์ที่แก้ไขได้ใหม่

หากต้องการวางข้อความ SVG ตามพาธ ให้กำหนดพาธพร้อม ID อ้างอิงมันจาก <textPath> ภายใน <text> และเขียนคำระหว่างแท็ก สำหรับตัวอักษรจัดกึ่งกลาง ใช้ startOffset="50%" คู่กับ text-anchor="middle" เก็บตราในกลุ่มแยกเพื่อเปลี่ยนคำได้โดยไม่สร้างงานภาพใหม่

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

สำหรับตัวอักษรแนวนอนข้างตรา ให้ จัดป้าย SVG ตรงให้พอดีด้วย textLength และเปรียบเทียบการเปลี่ยนระยะห่างก่อนปรับสัดส่วนอักขระ

เริ่มด้วยสามส่วนแยกกัน

ตราต้องมีงานภาพ พาธนำทาง และข้อความตามพาธนั้น เส้นนำทางควบคุมตำแหน่งตัวอักษร ไม่ต้องมองเห็นในงานสำเร็จ เอกสารอ้างอิง textPath ของ MDN อธิบายการเชื่อม href ระหว่างข้อความกับพาธ

สำหรับตัวอย่างด้านล่าง เราวาดต้นสนเรียบง่ายกับเส้นนำทางครึ่งวงกลมด้วยโค้ด SVG ทั้งสองเป็นงานสาธิตที่สร้างขึ้น ไม่ใช่ผลแปลง PerfectVector ตราเขียนว่า PINE TRAIL CLUB ตัวอักษรยังเป็นสตริงข้อความตลอดขั้นตอนสร้าง

สร้างตราที่แก้ไขได้

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

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400" viewBox="0 0 400 400"
     role="img" aria-labelledby="badge-title">
  <title id="badge-title">Pine Trail Club badge</title>
  <defs>
    <path id="badge-arc"
          d="M70 215 A130 130 0 0 1 330 215" />
  </defs>
 
  <circle cx="200" cy="205" r="166"
          fill="#f8f3e7" stroke="#214b41" stroke-width="6" />
  <g id="emblem" fill="#214b41">
    <path d="M200 150 148 220 175 220 133 273
             267 273 225 220 252 220Z" />
    <path d="M188 269H212V303H188Z" />
  </g>
 
  <text fill="#214b41" font-family="Georgia, serif"
        font-size="29" text-anchor="middle">
    <textPath href="#badge-arc" startOffset="50%">PINE TRAIL CLUB</textPath>
  </text>
</svg>

พาธเริ่มที่ (70, 215) และตามครึ่งวงกลมด้านบนไป (330, 215) รัศมีคือ 130 หน่วย การวางพาธใน <defs> ทำให้อ้างอิงได้โดยไม่วาดเส้นขอบที่เห็น วงกลมนอกสีอ่อนเป็นรูปทรงระบายแยก

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

จัดกึ่งกลางด้วยทั้งระยะเริ่มและจุดยึด

startOffset="50%" วางตำแหน่งอ้างอิงข้อความครึ่งทางตามพาธ text-anchor="middle" จัดกึ่งกลางข้อความตรงตำแหน่งนั้น อย่างหนึ่งเลือกตำแหน่งบนโค้ง อีกอย่างเลือกว่าส่วนใดของข้อความอยู่ที่นั่น เอกสารอ้างอิง startOffset และ เอกสารอ้างอิง text-anchor อธิบายตัวควบคุมเหล่านี้

ลองเปลี่ยนเฉพาะ text-anchor เป็น start สำหรับข้อความซ้ายไปขวานี้ คำจะเริ่มครึ่งทางและต่อไปทางปลายขวา ในการทดสอบเบราว์เซอร์ของเรา มันย้ายตัวอักษรไปด้านขวาและทำให้บางส่วนของวลีเลยส่วนโค้งที่ใช้ได้ คืน middle ก่อนปรับขนาดฟอนต์

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

ตรวจทิศพาธก่อนย้ายข้อความ

กลับทิศส่วนโค้งด้านบนนี้ด้วยการแทนค่า d เป็น:

d="M330 215 A130 130 0 0 0 70 215"

ต้นและปลายสลับกัน และแฟลกทิศการกวาดของส่วนโค้งเปลี่ยน สำหรับภาพอธิบายแฟลกส่วนโค้งทั้งสอง ดู ชุดแฟลกส่วนโค้ง SVG สี่แบบ เส้นโค้งเรขาคณิตอยู่ที่เดิม แต่ข้อความตามทิศตรงข้าม ในการทดสอบเบราว์เซอร์ การกลับนี้เปลี่ยนทิศตัวอักษร คืนพาธเดิมเพื่อให้ตัวอักษรตั้งตรงตลอดด้านบนของตรานี้

การกลับพาธต่างจากการกลับการสะกดหรือตั้งทิศการเขียนภาษา เก็บคำเดิมไว้ ข้อกำหนดเลย์เอาต์ข้อความ SVG อธิบายการวางอักขระตามพาธ สำหรับบรรทัดล่าง สร้างและทดสอบเส้นนำทางล่างแยกแทนย้ายข้อความบนไปเรื่อยจนข้ามตรา

เลือกฟอนต์ก่อนระยะห่างสุดท้าย

ตัวอย่างขอ Georgia แล้วตามด้วย serif สำรองทั่วไป คำขอนั้นไม่ได้ฝังฟอนต์ใน SVG ตัวเรนเดอร์เลือกแบบอักษรที่มีจากรายการตระกูลฟอนต์ตาม เอกสารอ้างอิง font-family ของ MDN

ในการสาธิต Chromium ของเรา การเปลี่ยนคำเดิมจาก Georgia, serif เป็น Arial, sans-serif เปลี่ยนความยาวรวมของข้อความที่วัด ส่วนโค้งและตราคงเดิม สิ่งสำคัญคือช่วงที่กินพื้นที่และรูปลักษณ์อักษร ไม่ใช่ความกว้างเฉพาะที่คอมพิวเตอร์อื่นอาจเรนเดอร์ต่างกัน

สำหรับตราจริง เลือกฟอนต์และน้ำหนักที่ตั้งใจก่อนปรับขนาดหรือระยะตัวอักษร จากนั้นเปิด SVG ในสภาพแวดล้อมใช้งานอีกครั้ง หากฟอนต์เปลี่ยนที่นั่น ใช้ คู่มือแก้ปัญหาฟอนต์ SVG แยกปัญหาแทนฟอนต์หรือการนำเข้า

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

กู้คืนเฉพาะงานภาพที่ต้องลากพาธ

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

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

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

ต้นสนเรียบง่ายของตัวอย่างเลี่ยงความซับซ้อนนำเข้า: ตราที่มีอยู่อาจใช้ระบบพิกัดต่างหรือมีการแปลง ปรับมาตราส่วนและตำแหน่งกลุ่มนั้นใน viewBox ของตรา แล้วตรวจอีกครั้งพร้อมข้อความที่เห็น อย่าเปลี่ยนเส้นนำทางตัวอักษรเพื่อชดเชยตราที่วางผิด

เก็บไฟล์หลักที่แก้ได้และทำสำเนาส่งมอบ

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

ในตัวเลือกบันทึก SVG ของ Illustrator Convert To Outlines แปลงตัวอักษรเป็นพาธ Adobe เตือนด้วยว่าข้อความตามพาธที่ส่งออกอาจเรนเดอร์ต่างในตัวดู SVG นั่นเป็นเหตุผลให้ตรวจสำเนาส่งออกในปลายทาง ไม่ใช่คำรับประกันทุกเครื่องมือถัดไปจะสร้างทั้งตราเหมือนเดิม ดู เอกสารบันทึก SVG ของ Adobe

ใช้ลำดับส่งมอบนี้:

1. บันทึกไฟล์หลักข้อความที่ยังแก้ได้ก่อนทำเส้นรอบรูปใด ๆ
2. ยืนยันคำ ฟอนต์ ทิศพาธ การจัดกึ่งกลาง และระยะห่าง
3. สร้างสำเนาส่งมอบแยกแล้วแปลงข้อความเป็นเส้นรอบรูปในโปรแกรมแก้ไข
4. เปิดสำเนาใหม่และเปรียบเทียบทุกตัวอักษร ช่องภายใน ช่องว่าง และตรา
5. ตรวจตราตามขนาดเอาต์พุตที่ตั้งใจในแอปที่รับ

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

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

ทำไมข้อความ SVG ไม่อยู่กึ่งกลางพาธ? ใช้ startOffset="50%" คู่กับ text-anchor="middle" สำหรับตัวอย่างจัดกึ่งกลาง ระยะเริ่ม 50% กับจุดยึด start เริ่มวลีครึ่งทางตามเส้นนำทาง ตรวจรูปพาธและว่าคำทั้งหมดพอดีด้วย

ทำไมข้อความกลับหัว? ตรวจทิศเส้นนำทาง ข้อความตามพาธในทิศที่วาด การกลับพาธจึงเปลี่ยนทิศตัวอักษรได้ ทดสอบทิศเส้นนำทางก่อนย้ายข้อความหรือเปลี่ยนการสะกด

แปลงตราเป็นเวกเตอร์แล้วได้ข้อความโค้งที่แก้ได้หรือไม่? การแปลงเป็นเวกเตอร์สร้างรูปอักษรที่เห็นคืนเป็นงานภาพ สำหรับคำที่แก้ได้ สร้างข้อความใหม่แยกด้วยฟอนต์ที่ตั้งใจและเส้นนำทาง textPath เก็บไฟล์หลักข้อความที่ยังแก้ได้ก่อนทำสำเนาส่งมอบเป็นเส้นรอบรูป

แหล่งอ้างอิง

1. MDN — textPath — การเชื่อมข้อความที่ยังแก้ได้กับพาธอ้างอิง
2. MDN — startOffset — การวางข้อความตามเส้นนำทาง
3. MDN — text-anchor — การจัดข้อความเทียบตำแหน่งอ้างอิง
4. W3C — ข้อความ SVG 2 — การวางอักขระและกฎเลย์เอาต์ข้อความตามพาธ
5. MDN — font-family — ฟอนต์ที่มีและการเลือกตระกูลฟอนต์สำรอง
6. Adobe — บันทึกงานใน Illustrator — การทำข้อความ SVG เป็นเส้นรอบรูปและข้อจำกัดส่งออกข้อความตามพาธ

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