มาร์กเกอร์ SVG: สร้างหัวลูกศรที่จัดแนวได้ถูกต้อง

หากต้องการติดหัวลูกศรที่ออกแบบเองกับพาธ SVG ให้กำหนดงานภาพภายใน <marker> และอ้างอิง ID ด้วย marker-end ตั้ง refX และ refY เป็นจุดบนงานภาพที่ควรพบปลายพาธ จากนั้นเลือกว่าจะให้มาร์กเกอร์หมุนตามพาธและโตตามความหนาเส้นขอบหรือไม่

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

เริ่มด้วย SVG เล็กที่ครบถ้วน

บันทึกต่อไปนี้เป็น markers.svg แล้วเปิดในเบราว์เซอร์ ตัวชี้เป็นตัวอย่างเขียนเอง มีปลายที่ (11, 6) ภายในพื้นที่พิกัด 12 × 12 ไม่ใช่ผลแปลง PerfectVector

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180">
  <defs>
    <marker id="pv-pointer" viewBox="0 0 12 12"
      refX="11" refY="6" markerWidth="6" markerHeight="6"
      markerUnits="strokeWidth" orient="auto-start-reverse">
      <path d="M1 1 L11 6 L1 11 L4 6 Z" fill="#087f82"/>
    </marker>
  </defs>
  <g fill="none" stroke="#20364d" stroke-width="4"
    marker-start="url(#pv-pointer)" marker-end="url(#pv-pointer)">
    <path d="M50 45 H350"/>
    <path d="M50 135 C130 75,260 195,350 135"/>
  </g>
</svg>

พาธแรกตรง พาธที่สองโค้ง ทั้งสองอ้างอิงมาร์กเกอร์เดียวที่ปลายทั้งสอง บล็อก <defs> เก็บคำจำกัดความ ส่วนการอ้างอิงจากพาธทำให้มองเห็น เอกสารอ้างอิง marker ของ MDN ครอบคลุมคุณสมบัติการติดที่ต้น กลาง และปลาย

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

วางจุดที่ตั้งใจไว้บนปลายพาธ

refX="11" refY="6" ระบุว่าจุดใดของงานมาร์กเกอร์ควรตรงกับปลายพาธ ไม่ได้ย้ายพาธเอง ในตัวอย่างนี้จุดนั้นคือปลายแหลม

เปรียบเทียบกับ refX="0" refY="0" เบราว์เซอร์วางจุดกำเนิดพิกัดมาร์กเกอร์บนปลายพาธ ทำให้ปลายแหลมอยู่ไกลไปทางขวาและต่ำลงบนเส้นแนวนอน การเพิ่มขนาดมาร์กเกอร์ทำให้เห็นข้อผิดพลาดชัดขึ้น ไม่ได้ซ่อมจุดยึด

MDN อธิบาย refX และ refY เป็นพิกัดจุดอ้างอิงมาร์กเกอร์ อ่านค่าเทียบพิกัดงานภาพเองรวมทั้ง viewBox แทนการเดาจากความกว้างที่แสดง

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

ปลายที่ยึดตรงปลายพาธยังทำให้เส้นขอบยาวไปถึงจุดนั้น บนเส้นหนา บางส่วนของเส้นขอบอาจเห็นข้างปลายแคบดังภาพเปรียบเทียบ หากรอยต่อนั้นสำคัญ ให้ปรับลวดลาย จุดยึด หรือปลายพาธร่วมกันและตรวจรอยต่อ การวางมาร์กเกอร์ไม่ได้ตัดเส้นขอบพื้นฐาน

ให้เส้นโค้งควบคุมทิศทาง

สำหรับหัวลูกศรที่ปลายพาธ orient="auto" หันตามทิศพาธ ณ จุดนั้น ทิศปลายเส้นโค้งมาจากเส้นสัมผัสเฉพาะจุด ลูกศรจึงไม่จำเป็นต้องชี้ตามเส้นตรงระหว่างปลายพาธทั้งสอง

สำหรับลูกศรทั้งสองปลาย ใช้ orient="auto-start-reverse" มันทำงานเหมือน auto ที่ปลาย แต่หมุนมาร์กเกอร์ต้นทางเพิ่ม 180 องศา เอกสาร orient ของ MDN อธิบายว่าเป็นวิธีใช้หัวลูกศรเดียวซ้ำให้ชี้ออกจากทั้งสองปลาย

ภาพเปรียบเทียบบนขวาแสดงความต่าง: เมื่อใช้ auto ตัวชี้ต้นทางหันตามเส้นโค้ง เมื่อใช้ auto-start-reverse มันหันออกจากต้นทาง คุณไม่ต้องมีสำเนารูปทรงที่กลับด้านด้วยมืออีกชิ้น

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

เลือกว่าความหนาเส้นควรเปลี่ยนขนาดมาร์กเกอร์หรือไม่

markerUnits กำหนดระบบพิกัดของขนาดและเนื้อหามาร์กเกอร์ ค่าปริยายคือ strokeWidth อีกทางเลือกคือ userSpaceOnUse ดูความต่างใน เอกสารอ้างอิง markerUnits ของ MDN

ตัวชี้กินระยะ 10 จาก 12 หน่วยแนวนอนใน viewBox เมื่อใช้ markerWidth="6" และ markerUnits="strokeWidth" ความกว้างก่อนหมุนคือ 10 / 12 × 6 × stroke-width: 20 หน่วยผู้ใช้บนเส้นหนา 4 หน่วย และ 40 บนเส้นหนา 8 หน่วย ภาพเปรียบเทียบล่างซ้ายใช้การตั้งค่าเหล่านั้น

หากต้องการให้ตัวชี้กว้าง 20 หน่วยที่ความหนาเส้นทั้งสอง ให้เปลี่ยนคำจำกัดความเป็น:

markerUnits="userSpaceOnUse" markerWidth="24" markerHeight="24"

ภาพเปรียบเทียบล่างขวาใช้ค่าเหล่านั้น การคง markerWidth="6" ขณะเปลี่ยนเฉพาะโหมดหน่วยจะให้ตัวชี้เล็กกว่ามาก เพราะหกหน่วยไม่ถูกคูณด้วยความหนาเส้นอีกแล้ว

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

เตรียมลวดลายที่ออกแบบเองก่อนทำเป็นมาร์กเกอร์

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

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

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

ตรวจไฟล์ในที่ที่จะใช้

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

• ยืนยันว่า url(#...) ทุกค่าอ้างอิง ID มาร์กเกอร์ที่ตั้งใจหลังจัดรวมหรือปรับไฟล์ให้เหมาะสม
• ตรวจพาธตรงและโค้ง รวมมาร์กเกอร์ต้นทางหากใช้
• เปรียบเทียบความหนาเส้นบางที่สุดและหนาที่สุดในงาน
• ตรวจปลาย รอยต่อ และงานที่อาจถูกตัดที่ขนาดแสดงสุดท้าย
• เปิด SVG ส่งมอบแยกอีกครั้งและเปรียบเทียบกับพรีวิวต้นฉบับ

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

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

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

ทำไมหัวลูกศร SVG เยื้องจากเส้น? ตรวจ refX และ refY เทียบพิกัดงานมาร์กเกอร์ มันระบุจุดที่วางบนปลายพาธ ในตัวอย่างนี้ปลายอยู่ที่ 11,6 การใช้ 0,0 วางจุดกำเนิดที่นั่นแทน

ใช้หัวลูกศรเดียวที่ทั้งสองปลายอย่างไร? อ้างอิงมาร์กเกอร์เดียวด้วย marker-start และ marker-end แล้วใช้ orient="auto-start-reverse" อินสแตนซ์ต้นทางกลับทิศ ส่วนปลายทางหันตามทิศพาธ

ทำไมหัวลูกศรโตเมื่อเพิ่มความหนาเส้น? ค่าปริยาย markerUnits คือ strokeWidth ใช้ userSpaceOnUse เมื่อต้องการให้มาร์กเกอร์คงขนาดในพิกัดผู้ใช้ขององค์ประกอบ แล้วปรับ markerWidth และ markerHeight สำหรับระบบหน่วยนั้น

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

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

1. MDN — marker — คำจำกัดความมาร์กเกอร์ รูปทรงที่รองรับ และคุณสมบัติการติด
2. MDN — refX — ตำแหน่งจุดอ้างอิงแนวนอนในระบบพิกัดมาร์กเกอร์
3. MDN — refY — ตำแหน่งจุดอ้างอิงแนวตั้งในระบบพิกัดมาร์กเกอร์
4. MDN — orient — การหมุนอัตโนมัติและกลับทิศอินสแตนซ์ต้นทาง
5. MDN — markerUnits — ขนาดอ้างอิงเส้นขอบและขนาดพิกัดผู้ใช้

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