perataan vertikal elemen teks dalam SVG

142

Katakanlah saya memiliki file 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>

Saya ingin menyelaraskan bagian atas adan b. Sebenarnya, saya ingin posisi saya sesuai dengan rooflinealih - alih baseline!

svg vertical-alignment w3c SeMeKh
sumber
Satu-satunya jawaban yang bekerja di IE: stackoverflow.com/a/29089222/9069356
Dominus.Vobiscum

Jawaban:

116

The alignment-baselineproperti adalah apa yang Anda cari untuk itu dapat mengambil nilai-nilai berikut

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

Deskripsi dari w3c

Properti ini menentukan bagaimana suatu objek disejajarkan sehubungan dengan induknya. Properti ini menentukan garis dasar elemen mana yang akan disejajarkan dengan garis dasar yang sesuai dari induk. Misalnya, ini memungkinkan garis dasar alfabet dalam teks Romawi untuk tetap selaras di seluruh perubahan ukuran font. Ini default ke baseline dengan nama yang sama dengan nilai yang dihitung dari properti alignment-baseline. Yaitu, posisi titik penyejajaran "ideografis" dalam arah blok-progresi adalah posisi garis dasar "ideografis" dalam tabel garis dasar objek yang disejajarkan.

Sumber W3C

Sayangnya, meskipun ini adalah cara yang "benar" untuk mencapai apa yang Anda cari, tampaknya Firefox belum menerapkan banyak atribut presentasi untuk Modul Teks SVG ( 'SVG in Firefox' MDN Documentation )

Simon Barat
sumber
Tidak beruntung dengan itu. Bisakah Anda memberikan contoh?
SeMeKh
2
Menurut pendapat saya, jawaban terbaik, karena menjawab milik saya tanpa harus menavigasi ke halaman wall-of-text. Saya ingin menampilkan teks saya di y = 0, tapi itu off screen, jadi saya menggunakan aturan CSS "alignment- baseline: menggantung ", dan itu melakukan persis apa yang saya cari, teks pada titik tertinggi dalam wadah SVG, tanpa satu piksel menjadi layar.
R. Hill
1
@ SeMeKh: Hmm kebetulan, itu bekerja untuk saya di Chromium, tapi sekarang saya baru saja memverifikasi bahwa hal yang sama tidak berfungsi pada Firefox. Jadi sepertinya properti ini tidak didukung secara konsisten di seluruh browser seperti yang sekarang.
R. Hill
2
@ R.Hill Berikut adalah laporan bug untuk firefox yang dibuka lebih dari 11 tahun yang lalu bugzilla.mozilla.org/show_bug.cgi?id=308338 Btw: Apa perbedaan antara 'tengah' dan 'tengah'?
mxmlnkn
9
Terbalik karena kesalahan, dan karena saya telah melakukan kesalahan yang sama sebelumnya, saya tidak bisa membatalkannya. ☹ alignment-baseline: centraltidak tidak bekerja untuk SVGs di FireFox, dan itu tampaknya dengan desain. dominant-baseline: centralberfungsi di setiap browser yang saya coba sejauh ini, seperti yang ditunjukkan dalam jawaban ini: stackoverflow.com/a/15997503/1450294
Michael Scheper
227

Menurut SVG spec, alignment-baselinehanya berlaku untuk <tspan>, <textPath>, <tref>dan <altGlyph>. Pemahaman saya adalah bahwa ini digunakan untuk mengimbangi mereka dari <text>objek di atas mereka. Saya pikir apa yang Anda cari dominant-baseline.

Nilai yang mungkin dari dominant-baselineadalah:

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

Periksa rekomendasi W3C untuk properti baseline-dominan untuk informasi lebih lanjut tentang setiap nilai yang mungkin.

toutankh
sumber
8
Ini memperbaiki masalah saya dengan Firefox (yang tidak berfungsi dengan properti "alignment-baseline"). "Garis dasar dominan" berfungsi di Chrome & Firefox. Terima kasih!
Mariano Desanze
5
Kecuali bahwa ini tidak berfungsi di versi IE mana pun pada saat ini, jadi sayangnya ini tidak terlalu berguna untuk banyak aplikasi di dunia nyata.
Yona Appletree
3
Karena IE tidak mendukung baseline-dominan, atau alignment-baseline, Anda dapat memeriksa dukungan untuk fitur seperti itu element.hasAttribute('dominant-baseline'), dan jika mengembalikan false, dy=-0.4emseperti yang dijelaskan dalam jawaban ini stackoverflow.com/a/29089222/2296470
Tigran
1
dominan-baseline: sentral bekerja dalam kasus saya. Terima kasih!
Liam Mitchell
1
Ketahuilah bahwa garis dasar yang dominan tidak didukung oleh IE10-12 dan Edge16
japrescott
47

attr ("dominan-baseline", "central")

pengguna1087079
sumber
1
Ini sejajar dengan pusat karakter (sebanyak font mesin terbang bermain dengan baik), tidak yakin bagaimana ini merupakan jawaban di sini untuk pertanyaan ini.
matanster
3
Ini adalah metode penetapan atribut d3 atau jquery
glyph
1
Solusi ini menempatkan garis dasar di tengah vertikal teks. Jadi koordinat y adalah di pusat vertikal. Ini adalah jawaban yang saya cari. Terima kasih.
Henry
1
Inti dari jawabannya adalah benar - atur atribut dominan-baseline ke pusat, namun attr () bukan fungsi JS asli dan tidak ada penjelasan sama sekali.
jave.web
30

Jika Anda menguji ini di IE, garis dasar dominan dan garis dasar tidak didukung.

Cara paling efektif untuk memusatkan teks di IE adalah menggunakan sesuatu seperti ini dengan "dy":

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

Nilai negatif akan menggesernya ke atas dan nilai positif dari dy akan menggesernya ke bawah. Saya menemukan menggunakan -.4em tampaknya sedikit lebih terpusat pada saya daripada -.5em, tetapi Anda akan menjadi hakim untuk itu.

whyoz
sumber
5
Terima kasih telah memiliki satu-satunya jawaban yang berfungsi di IE. Sayang sekali kita harus melakukan ini, tetapi jawaban yang lain menyia-nyiakan saya banyak waktu untuk membuat semuanya bekerja di Chrome / FF, kemudian menemukan bahwa itu tidak berfungsi di IE selama pengujian browser.
Yona Appletree
Keputusan yang bagus dan sederhana! Dan kita harus ingat untuk menghapus atribut "alignment-baseline" untuk menghilangkan pengaruhnya pada posisi teks di browser yang mendukungnya.
YaTaras
7

Setelah melihat Rekomendasi SVG, saya sampai pada pemahaman bahwa properti dasar dimaksudkan untuk memposisikan teks relatif terhadap teks lain, terutama ketika mencampur berbagai font dan atau bahasa. Jika Anda ingin memposisikan teks sehingga berada di atas ymaka Anda perlu menggunakannya dy = "y + the height of your text".

rjax
sumber
Hargai tautan ke spec, beberapa bacaan yang sangat berguna di sana. Tidak mengetahui opsi (ditautkan) "<list-of-lengths>"misalnya (memungkinkan manipulasi per karakter)
brichins