การจัดตำแหน่งแนวตั้งขององค์ประกอบข้อความใน SVG

142

สมมติว่าฉันมีไฟล์ SVG:

<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x='20' y='60' style="font-size: 60px">b</text>
    <text x='100' y='60' style="font-size: 60px">a</text>
</svg>

ฉันต้องการจัดตำแหน่งด้านบนของaและbอย่างใด ที่จริงแล้วฉันต้องการให้ตำแหน่งของฉันเป็นไปตามrooflineแทนที่จะเป็นbaseline!

svg vertical-alignment w3c

— SeMeKh
แหล่งที่มา

คำตอบเดียวที่ใช้งานได้ใน IE: stackoverflow.com/a/29089222/9069356

— Dominus.Vobiscum

116

alignment-baselineคุณสมบัติคือสิ่งที่คุณกำลังมองหาก็สามารถใช้ค่าต่อไปนี้

auto | baseline | before-edge | text-before-edge | 
middle | central | after-edge | text-after-edge | 
ideographic | alphabetic | hanging | mathematical | 
inherit

คำอธิบายจาก w3c

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

ที่มา W3C

น่าเสียดายที่นี่เป็นวิธีที่ "ถูกต้อง" ในการบรรลุสิ่งที่คุณจะปรากฏหลังจาก Firefox ปรากฏว่ายังไม่ได้ใช้คุณสมบัติการนำเสนอสำหรับโมดูลข้อความ SVG จำนวนมาก ( 'SVG ใน Firefox' เอกสาร MDN )

— ไซม่อนเวสต์
แหล่งที่มา

ไม่มีโชคกับสิ่งนั้น คุณช่วยยกตัวอย่างได้ไหม

— SeMeKh

2

ในความเห็นของฉันคำตอบที่ดีที่สุดเพราะมันตอบโดยไม่ต้องไปที่หน้าข้อความฉันต้องการแสดงข้อความของฉันที่ y = 0 แต่มันเป็นหน้าจอปิดดังนั้นฉันจึงใช้ CSS "การจัดตำแหน่ง - baseline: hanging "และมันก็ทำสิ่งที่ฉันต้องการอย่างแน่นอนข้อความที่จุดสูงสุดในคอนเทนเนอร์ SVG โดยไม่ต้องมีพิกเซลเดียวอยู่นอกจอ

— R. Hill

1

@SeMeKh: อืมบังเอิญมันทำงานกับฉันใน Chromium แต่ตอนนี้ฉันเพิ่งตรวจสอบว่าเหมือนกันไม่ทำงานบน Firefox ดังนั้นจึงดูเหมือนว่าคุณสมบัตินี้ไม่ได้รับการสนับสนุนอย่างสม่ำเสมอในเบราว์เซอร์ ณ ตอนนี้

— R. Hill

2

@ R.Hill นี่คือ bugreport สำหรับ firefox ที่เปิดมานานกว่า 11 ปีที่ผ่านมาbugzilla.mozilla.org/show_bug.cgi?id=308338 Btw: ความแตกต่างระหว่าง 'กลาง' และ 'ศูนย์กลาง' คืออะไร?

— mxmlnkn

9

โหวตขึ้นโดยความผิดพลาดและเนื่องจากฉันเคยทำผิดพลาดมาก่อนฉันจึงไม่สามารถยกเลิกได้ ☹ alignment-baseline: centralใช้งานไม่ได้กับ SVG ใน FireFox และดูเหมือนว่าจะมาจากการออกแบบ dominant-baseline: centralทำงานได้ในทุกเบราว์เซอร์ที่ฉันได้ลองไปแล้วตามที่ระบุไว้ในคำตอบนี้: stackoverflow.com/a/15997503/1450294

— Michael Scheper

228

ตาม SVG ข้อมูลจำเพาะalignment-baselineเฉพาะกับ<tspan>, <textPath>, และ<tref> <altGlyph>ความเข้าใจของฉันคือการใช้เพื่อชดเชยสิ่งที่อยู่<text>เหนือวัตถุ dominant-baselineผมคิดว่าสิ่งที่คุณกำลังมองหาอยู่

ค่าที่เป็นไปได้ dominant-baselineคือ:

auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit

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

— toutankh
แหล่งที่มา

9

วิธีนี้แก้ไขปัญหาของฉันกับ Firefox (ซึ่งไม่ได้ทำงานกับคุณสมบัติ "การจัดแนว - พื้นฐาน") "dominant-baseline" ใช้งานได้บน Chrome และ Firefox ขอบคุณ!

— Mariano Desanze

5

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

— Yona Appletree

3

เนื่องจาก IE ไม่รองรับทั้ง dominant-baseline หรือ alignment-baseline คุณสามารถตรวจสอบการสนับสนุนของฟีเจอร์ดังelement.hasAttribute('dominant-baseline')กล่าวได้และถ้ามันคืนค่าเท็จมาใช้dy=-0.4emตามที่อธิบายไว้ในคำตอบนี้stackoverflow.com/a/29089222/2296470

— Tigran

1

หลัก - เด่น: งานกลางในกรณีของฉัน ขอบคุณ!

— เลียมมิทเชล

1

โปรดทราบว่าIE10-12 และ Edge16 ไม่รองรับมาตรฐานที่โดดเด่น

— japrescott

47

attr ("เด่น - พื้นฐาน", "กลาง")

— user1087079
แหล่งที่มา

1

สิ่งนี้จัดเรียงตามกึ่งกลางของตัวละคร (เท่าที่ตัวอักษรร่ายมนตร์เล่นได้ดี) ไม่แน่ใจว่านี่เป็นคำตอบสำหรับคำถามนี้ได้ที่นี่

— matanster

3

นี่คือวิธี d3 หรือ jquery ของการกำหนดแอตทริบิวต์

— glyph

1

วิธีการแก้ปัญหานี้ทำให้พื้นฐานในใจกลางแนวตั้งของข้อความ พิกัด y จึงอยู่ที่กึ่งกลางแนวตั้ง นี่คือคำตอบที่ฉันต้องการ ขอบคุณ

— เฮนรี่

1

หลักของคำตอบนั้นถูกต้อง - ตั้งค่าคุณสมบัติ dominant-baseline เป็นศูนย์กลางอย่างไรก็ตาม attr () ไม่ใช่ฟังก์ชัน JS ดั้งเดิมและไม่มีคำอธิบายเลย

— jave.web

30

หากคุณกำลังทดสอบสิ่งนี้ใน IE ระบบจะไม่รองรับ dominant-baseline และ alignment-baseline

วิธีที่มีประสิทธิภาพที่สุดในการจัดกึ่งกลางข้อความใน IE คือใช้สิ่งนี้กับ "dy":

<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>

ค่าลบจะเลื่อนขึ้นและค่าบวกของ dy จะเลื่อนลง ฉันพบว่าใช้ -.4em ดูเหมือนจะอยู่กึ่งกลางแนวตั้งให้ฉันมากกว่า -.5em แต่คุณจะเป็นผู้ตัดสินสิ่งนั้น

— whyoz
แหล่งที่มา

5

ขอบคุณที่มีคำตอบเดียวที่ใช้ได้ใน IE มันเป็นความอัปยศที่เราต้องทำ แต่คำตอบอื่น ๆ ทำให้ฉันเสียเวลาอย่างมากในการทำงานทุกอย่างใน Chrome / FF จากนั้นก็พบว่ามันไม่ทำงานใน IE ในระหว่างการทดสอบเบราว์เซอร์

— Yona Appletree

การตัดสินใจที่ดีและเรียบง่าย! และเราควรอย่าลืมลบแอตทริบิวต์ "alignment-baseline" เพื่อไม่ให้มีผลกระทบต่อตำแหน่งข้อความในเบราว์เซอร์ที่รองรับ

— YaTaras

7

หลังจากดูคำแนะนำ SVGฉันได้ทำความเข้าใจว่าคุณสมบัติพื้นฐานมีความหมายในการวางตำแหน่งข้อความที่เกี่ยวข้องกับข้อความอื่น ๆ โดยเฉพาะอย่างยิ่งเมื่อผสมแบบอักษรและภาษาต่างๆ หากคุณต้องการข้อความตำแหน่งเพื่อให้ด้านบนที่แล้วคุณจำเป็นต้องใช้ydy = "y + the height of your text"

— rjax
แหล่งที่มา

ขอบคุณลิงค์ไปยังข้อมูลจำเพาะบางอย่างที่เป็นประโยชน์ในการอ่านที่นั่น ไม่รับรู้ถึง"<list-of-lengths>"ตัวเลือก(ที่เชื่อมโยง) เช่น (อนุญาตการจัดการต่อตัวละคร)

— brichins