วัดความยาวพาธ SVG โดยไม่สับสนสเกล

เพื่อวัดพาธ SVG เรียก getTotalLength() บนองค์ประกอบรูปทรง แล้วระบุระบบพิกัดเบื้องหลังตัวเลข เบราว์เซอร์คืนความยาวในหน่วยผู้ใช้ ตัวเลขนั้นไม่ใช่ความยาวที่แสดง ค่ามิลลิเมตร หรือระยะเดินเครื่องโดยอัตโนมัติ

เช่น เส้นทแยงต้นฉบับของเรายาว 50 หน่วยผู้ใช้ สเกลเท่ากันทำความยาวในพื้นที่รากเป็นสองเท่าคือ 100 แต่สเกลเฉพาะแนวนอนทำให้ประมาณ 72.111 ผล API เฉพาะที่ยังเป็น 50 ทั้งสองกรณี ตัวเลขตอบคำถามวัดคนละแบบ

วัดส่วนที่ทราบก่อนวัดงานภาพ

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

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

HTML ครบนี้วัดส่วนเส้นตรง บันทึกเป็นไฟล์ HTML แล้วเปิดในเบราว์เซอร์:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG length control</title>
<svg width="240" height="240" viewBox="0 0 120 120">
  <path id="route" d="M10 10 L40 50"
        fill="none" stroke="black" />
</svg>
<pre id="result"></pre>
<script>
  const route = document.querySelector("#route");
  document.querySelector("#result").textContent =
    route.getTotalLength() + " local user units";
</script>
</html>

การเปลี่ยนแนวนอนคือ 30 แนวตั้ง 40 ความยาวที่คาดจึงเป็น sqrt(30² + 40²) = 50 ผลที่แสดงให้ตัวควบคุมที่ทราบก่อนเชื่อเส้นโค้งซับซ้อนหรือสัญลักษณ์นำเข้า วิวพอร์ต 240 พิกเซลไม่เปลี่ยนผลเฉพาะที่เป็น 100 หน่วยผู้ใช้

ในตัวอย่างเบราว์เซอร์ เราประกาศค่าคลาดเคลื่อน 0.01 หน่วยผู้ใช้ ตัวควบคุมหนึ่งในสี่วงกลมรัศมี 10 มีความยาวเชิงวิเคราะห์ 5π ประมาณ 15.708 เบราว์เซอร์ทดสอบรายงาน Chrome 155 และคืนประมาณ 15.7102 ซึ่งอยู่ในค่าคลาดเคลื่อน เบราว์เซอร์คำนวณความยาวโค้งเชิงตัวเลข จึงเก็บความแม่นยำที่มีประโยชน์และเทียบค่าคลาดเคลื่อนเหมาะสม แทนเรียกร้องทศนิยมสุดท้ายเหมือนกันทุกระบบ

แยกความยาวเฉพาะที่กับหลังแปลง

สองตัวอย่างถัดไปเก็บ d="M10 10 L40 50" เดิมและเพิ่มการแปลง:

สเกลเท่ากันคูณทุกทิศด้วยขนาดเดียว จึงคูณความยาวเฉพาะที่ด้วย 2 ได้ในแถวสอง สเกลไม่เท่ากันจัดการแต่ละทิศต่างกัน ในแถวสาม ส่วนเส้นที่เปลี่ยนกว้าง 60 หน่วยและลง 40 หน่วย คือ sqrt(60² + 40²) ไม่ใช่ 50 × 2

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

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

const root = route.ownerSVGElement;
const relative = root.getCTM().inverse().multiply(route.getCTM());
const a = new DOMPoint(10, 10).matrixTransform(relative);
const b = new DOMPoint(40, 50).matrixTransform(relative);
const transformedLength = Math.hypot(b.x - a.x, b.y - a.y);

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

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

แปลงมิลลิเมตรหลังตรึงการแมปเท่านั้น

เอกสารสัญลักษณ์ต้นฉบับประกาศ width="50mm", height="50mm" และ viewBox="0 0 100 100" เมื่อแมปเท่ากันตามตั้งใจ คือ 0.5 มม. ต่อหน่วยผู้ใช้ ความกว้างนอกสัญลักษณ์กิน 80 หน่วย จึงกว้างตามระบุ 40 มม.

เส้นขอบสองเส้นรวม 380 หน่วยผู้ใช้ ที่สเกลประกาศ:

50 mm / 100 user units = 0.5 mm per user unit
380 user units × 0.5 mm per user unit = 190 mm of contours

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

ความกว้างเอกสารทั้งหมดยังต่างจากความกว้างงานข้างใน หากตั้งเฉพาะความกว้างนอกสัญลักษณ์เป็น 50 มม. แทน ความกว้าง 80 หน่วยให้ตัวคูณอื่นคือ 50 / 80 = 0.625 mm per unit 380 หน่วยเดิมจะเป็นเส้นขอบ 237.5 มม. บันทึกว่าตั้งความกว้างใด ใช้คู่มือกรอบขอบเขต SVG เมื่อต้องตรวจขอบเขตก่อน

pathLength ปรับเทียบระยะโดยไม่เปลี่ยนรูปทรง

เรายังทำสำเนาส่วนเส้นเดิม 50 หน่วยพร้อม pathLength="1" ผล getTotalLength() ยังเป็น 50 แอตทริบิวต์ไม่เปลี่ยนจุดปลายหรือทำความยาวรูปทรงเป็นหนึ่งหน่วย

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

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

รวมเส้นขอบโดยไม่เรียกผลรวมว่าระยะเดินเครื่อง

สัญลักษณ์มีขอบนอกกับรูข้าวหลามตัด พาธผสมเดิมเก็บเส้นขอบปิดทั้งสอง:

<path fill-rule="evenodd"
      d="M10 10 H90 V60 L50 90 L10 60 Z
         M50 25 L65 45 L50 65 L35 45 Z" />

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

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

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

บันทึกการวัดพร้อมสมมติฐาน

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

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

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

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

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

getTotalLength() คืนพิกเซลหรือมิลลิเมตร? คืนความยาวที่เบราว์เซอร์คำนวณในหน่วยผู้ใช้ SVG กำหนดการแมปพิกัดและขนาดก่อนแสดงผลในพิกเซลวิวพอร์ตหรือหน่วยกายภาพตามระบุ

ทำไมสเกลพาธแล้วผล API เฉพาะที่ไม่เปลี่ยน? เส้นทางเฉพาะที่ที่เก็บกับรูปหลังแปลงอยู่ในพื้นที่พิกัดต่างกัน ส่วนเส้นข้อมูลเดียวกันของเราคืน 50 เฉพาะที่หลังสเกลทั้งเท่ากันและไม่เท่ากัน ความยาวหลังแปลงเป็น 100 และประมาณ 72.111 หน่วย SVG ราก

pathLength="1" หมายถึงพาธยาวหนึ่งหน่วยหรือไม่? ให้ค่าปรับเทียบสำหรับพฤติกรรมระยะตามพาธที่รองรับ ความยาวคำนวณ API รูปทรงไม่ใช้แอตทริบิวต์นั้น ตัวควบคุม 50 หน่วยของเรายังคืน 50

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

แหล่งข้อมูล

1. MDN: SVGGeometryElement.getTotalLength() — ความยาวพาธคำนวณโดยเบราว์เซอร์ในหน่วยผู้ใช้
2. W3C API รูปทรง SVG — ความยาวคำนวณและความเป็นอิสระจากการปรับเทียบ pathLength
3. W3C ระบบพิกัด SVG — วิวพอร์ต viewBox และการแมปแปลง
4. MDN: pathLength — การปรับเทียบพฤติกรรมระยะตามพาธ
5. W3C พาธ SVG — พาธย่อย ส่วนเส้นที่วาด และคำสั่งปิด

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