Softonic

เครื่องมือสร้างเส้นโค้งวงกลมแบบ SVG

ขั้นตอน 1 / 2
ถัดไป

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

วิธีทำให้ข้อความโค้งรอบวงกลม

  1. 1

    กรุณาป้อนข้อความ

    วลีสั้น (3–8 คำ) อ่านได้ดีที่สุด ส่วนประโยคยาวควรจัดวางให้โค้งงอเล็กน้อยเพื่อให้การอ่านเป็นธรรมชาติ

  2. 2

    ตั้งรัศมี

    รัศมีที่ใหญ่ขึ้น = เส้นโค้งที่นุ่มนวลขึ้น = ตัวอักษรอ่านได้ชัดเจนยิ่งขึ้น หากรัศมีเล็กเกินไป ตัวอักษรจะเอียงอย่างมาก

  3. 3

    เลื่อนจุดเริ่มต้น

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

  4. 4

    ปรับขนาด ระยะห่าง และทิศทาง

    ตัวควบคุมที่มีจะเปลี่ยนขนาดฟอนต์ ระยะห่างตัวอักษร สี และทิศทางของเส้นทางตามหรือทวนเข็มนาฬิกา

  5. 5

    คัดลอกไฟล์ SVG

    ผลลัพธ์ประกอบด้วยเส้นทางที่มองไม่เห็น ไฟล์ `<textPath>` และรูปแบบการจัดรูปแบบฟอนต์ พร้อมใช้งานได้ทันทีบนหน้าใดก็ตาม

กลไกการทำงานของ textPath ในระดับโครงสร้างภายใน

<svg viewBox="0 0 300 300">
  <defs>
    <path id="ring" d="M 150,150 m -100,0 a 100,100 0 1,1 200,0 a 100,100 0 1,1 -200,0" />
  </defs>
  <text font-family="Inter" font-size="24" font-weight="700">
    <textPath href="#ring" startOffset="50%" text-anchor="middle">
      CDEM SOLUTIONS . EST 2024 .
    </textPath>
  </text>
</svg>

แอตทริบิวต์ d ใช้คำสั่ง m/a (moveto / arc) เพื่อวาดวงกลมเต็มดวง จากนั้น <textPath> จะวางข้อความตามเส้นทางที่วาดไว้ ส่วน startOffset ใช้ค่าเปอร์เซ็นต์ของเส้นทาง และ text-anchor="middle" จะจัดตำแหน่งข้อความให้อยู่ตรงกลางตามค่าดังกล่าว

ความหนาแน่นของข้อความเทียบกับความชัดเจนในการอ่าน

รัศมี (พิกเซล) ความรู้สึก เหมาะสำหรับ
40–60 แน่นมาก และบิดเบี้ยว ใช้เฉพาะโลโก้แนวนามธรรมเท่านั้น
80–120 ตราประจำแบบคลาสสิก ไอคอนแอปพลิเคชัน และเหรียญ
140–200 รูปโค้งอ่อน โลโก้และตราของบริษัทกาแฟ
มากกว่า 250 รายการ เกือบตรง การตกแต่งหัวข้อ

การตั้งค่าเริ่มต้นทั่วไป

  • อาร์กด้านบน, เริ่มจากมุม 180° และครอบคลุมระยะทาง 180° ของวงกลม โดยครึ่งส่วนบนสามารถอ่านได้อย่างชัดเจนจากซ้ายไปขวา
  • อาร์กด้านล่างแบบพลิก, ให้เปลี่ยนทิศทางเส้นทาง หรือใช้ side="right" เพื่อให้ข้อความแสดงผลอย่างถูกต้องเมื่อวางในแนวกลับขึ้น
  • วงแหวนเต็ม, ข้อความจะเปลี่ยนแนวการแสดงครั้งเดียว เพิ่มช่องว่างด้านหน้าและด้านหลัง (.) เพื่อไม่ให้จุดเชื่อมต่อดูไม่กลมกลืน

คำแนะนำสำหรับการส่งออก

  • SVG แบบ inline ช่วยให้คุณกำหนดโทนสีของพื้นที่เติมได้โดยใช้ currentColor หรือคุณสมบัติเฉพาะตาม CSS
  • ควรหลีกเลี่ยงการใส่ฟอนต์เว็บไว้ภายในไฟล์ SVG โดยแทนที่ด้วยการระบุฟอนต์นั้นใน CSS ระดับทั่วไป เพื่อให้เบราว์เซอร์สามารถนำฟอนต์ที่โหลดไว้แล้วมาใช้ซ้ำได้
  • หากคุณต้องการภาพนิ่ง (รูปแบบ PNG หรือ favicon) ให้ประมวลผลไฟล์ SVG ด้วยโปรแกรมแปลงรูปแบบภาพให้เป็นรูปแบบราสเตอร์ในขนาดที่ต้องการ โดย SVG สามารถปรับขนาดได้อย่างไม่มีการสูญเสียข้อมูล แต่บางแพลตฟอร์มยังคงต้องการไฟล์รูปแบบบิตแมป

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

โดยค่าเริ่มต้น textPath จะทำตามทิศทางของเส้นทาง หากวาดวงกลมในทิศทางนาฬิกา ครึ่งล่างของข้อความจะพลิกคว่ำไปด้านบน คุณสามารถวาดครึ่งล่างเป็นเส้นโค้งแยกต่างหากในทิศทางตรงกันข้ามกับทิศทางนาฬิกา ใช้ side="right" (SVG 2) หรือแบ่งข้อความออกเป็นองค์ประกอบสองส่วนได้

ใช่ อ็อบเจกต์ <text> ที่สร้างขึ้นจะรองรับแอตทริบิวต์มาตรฐานของ SVG/CSS ได้ ได้แก่ fill, font-weight, font-style และ letter-spacing สามารถแก้ไขแอตทริบิวต์เหล่านี้ได้ทั้งโดยการแทรกตรงในโค้ดหรือผ่าน CSS จากภายนอก

<textPath> ได้รับการรองรับในเบราว์เซอร์ Chrome, Firefox, Safari และ Edge มาแล้วกว่าหนึ่งทศวรรษ ส่วน IE11 มีการรองรับเพียงบางส่วนเท่านั้น หากคุณยังต้องการใช้งาน สามารถปรับแต่งภาพบัตรประจำตัวให้พร้อมรับการเรซาร์ไรซ์ล่วงหน้าได้

เพิ่ม letter-spacing="2" (หรือหลายรายการ) ลงในองค์ประกอบข้อความ การใช้รัศมีที่แคบจะช่วยเพิ่มความอ่านได้ง่ายอย่างมาก

ไม่ ข้อความและ SVG สร้างขึ้นในเบราว์เซอร์ของคุณ วลีจะไม่ถูกส่งไปยังเซิร์ฟเวอร์หรือจัดเก็บไว้

เครื่องมือที่เกี่ยวข้อง

ตัวเลือกสี Material Design

สำรวจพาเลตสีของ Material Design คัดลอกเฉดสีใดก็ได้ (ตั้งแต่ 50 ถึง A700) ในรูปแบบ HEX, RGB หรือ HSL เพียงแตะครั้งเดียว

เครื่องสร้างกระดาษเส้นบรรทัด

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

โปรแกรมแปลงรูปแบบภาพ

แปลงรูปภาพเป็น JPG, PNG หรือ WebP ได้ทันทีในเบราว์เซอร์ พร้อมควบคุมคุณภาพสำหรับรูปแบบบีบอัดและรักษาความโปร่งใสใน PNG และ WebP

เครื่องมือแบ่งกริดรูปภาพ Instagram

แบ่งรูปภาพขนาดใหญ่ให้เป็นกริด Instagram ขนาด 3×3 หรือกี่แถวก็ได้ แต่ละแผ่นภาพมีหมายเลขกำกับ จึงอัปโหลดแบบย้อนลำดับได้ง่าย

ตัวแปลง JPG เป็น Word

แปลงภาพถ่าย JPG หรือภาพหน้าจอของข้อความเป็นเอกสาร Word ที่แก้ไขได้ เครื่องมืออ่านคำด้วย OCR แล้วจัดวางเพื่อให้คุณเขียนใหม่ จัดรูปแบบ และนำกลับมาใช้ได้

เครื่องแปลงค่าจาก Pantone เป็น HEX

แปลงสี Pantone PMS ให้เป็นค่า HEX, RGB และ CMYK ที่ใกล้เคียงที่สุด เพื่อให้สอดคล้องกันระหว่างการแสดงผลบนหน้าจอและการพิมพ์ โดยพร้อมดูตัวอย่างสีแบบสวัตช์

เครื่องมือนี้มีให้บริการในภาษาอื่น