ความกว้างของจังหวะคงที่ใน SVG

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

บริบทดังต่อไปนี้:

ฉันมีองค์ประกอบ SVG พร้อมชุดแอตทริบิวต์ viewBox และ preserveAspectRatio มันจะเป็นแบบนี้

<svg version="1.1" baseProfile="full"
    viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg" >
</svg>

ซึ่งหมายความว่าเมื่อฉันปรับขนาดองค์ประกอบนั้นรูปร่างที่แท้จริงภายในจะปรับขนาดตามนั้น (จนถึงตอนนี้ก็ดีมาก)

อย่างที่คุณเห็นฉันได้ตั้งค่า viewBox เพื่อให้จุดเริ่มต้นอยู่ตรงกลาง ฉันต้องการวาดแกน x และแกน y ภายในองค์ประกอบนั้นซึ่งฉันจะทำดังนี้:

<line x1="-1000" x2="1000" y1="0" y2="0" />

อีกครั้งวิธีนี้ใช้ได้ดี ตามหลักการแล้วแกนนี้จะกว้างเพียง 1px เสมอ ฉันไม่สนใจที่แกนจะอ้วนขึ้นเมื่อฉันปรับขนาดองค์ประกอบ svg หลัก

ฉันเมาแล้วเหรอ?

คุณสามารถใช้vector-effectชุดคุณสมบัติที่จะnon-scaling-strokeดูเอกสาร transform(ref)อีกวิธีหนึ่งคือการใช้งาน

ซึ่งจะทำงานในเบราว์เซอร์ที่รองรับชิ้นส่วนเหล่านั้นจาก SVG Tiny 1.2 เช่น Opera 10 ทางเลือกรวมถึงการเขียนสคริปต์ขนาดเล็กเพื่อทำเช่นเดียวกันโดยทั่วไปจะกลับ CTM และนำไปใช้กับองค์ประกอบที่ไม่ควรปรับขนาด

หากคุณต้องการเส้นที่คมชัดขึ้นคุณยังสามารถปิดใช้งานการลบรอยหยัก ( shape-rendering=optimizeSpeedหรือshape-rendering=crispEdges) และ / หรือเล่นกับการวางตำแหน่งได้