SVG'de metin öğesinin dikey hizalaması

142

Diyelim ki SVG dosyasına sahibim:

<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>

Bir şekilde üst hizalamak istiyorum ave b. Aslında, konumumun rooflineyerine değil olmasını istiyorum baseline!

svg vertical-alignment w3c

— SeMeKh
kaynak

IE'de çalışan tek cevap: stackoverflow.com/a/29089222/9069356

— Dominus.Vobiscum

116

alignment-baselineÖzelliği aşağıdaki değerleri alabilir kullanarak, istediğiniz şeydir

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

W3c açıklaması

Bu özellik, bir nesnenin üst nesneye göre nasıl hizalandığını belirtir. Bu özellik, bu öğenin hangi taban çizgisinin, üst öğenin karşılık gelen taban çizgisine hizalanacağını belirtir. Örneğin, bu, Roma metnindeki alfabetik taban çizgilerinin yazı tipi boyutu değişiklikleri arasında hizalanmış kalmasına izin verir. Varsayılan olarak, hizalama taban çizgisi özelliğinin hesaplanan değeri ile aynı ada sahip taban çizgisine ayarlanır. Yani, blok-ilerleme yönünde "ideografik" hizalama noktasının konumu, hizalanan nesnenin taban tablosundaki "ideografik" taban çizgisinin konumudur.

W3C Kaynağı

Ne yazık ki, bu göründükten sonra elde etmenin "doğru" yolu olmasına rağmen, Firefox SVG Metin Modülü ( 'Firefox'ta SVG' MDN Belgeleri ) için çok sayıda sunum özelliği uygulamadı

— Simon West
kaynak

Bununla hiç şansım olmadı. Bir örnek verebilir misiniz?

— SeMeKh

2

Bence en iyi cevap, bir metin duvarı sayfasına gitmek zorunda kalmadan benimkini yanıtladı. Y = 0'da metnimi görüntülemek istedim, ancak ekran dışındaydı, bu yüzden bir CSS kuralı "hizalama- baseline: hanging "ve tam olarak aradığımı yaptı, tek bir piksel ekran dışında olmadan SVG kapsayıcısının en yüksek noktasında metin.

— R. Hill

1

@SeMeKh: Hmm tesadüfen, Chromium'da benim için çalıştı, ama şimdi aynı şeyin Firefox'ta çalışmadığını doğruladım. Bu nedenle, bu özellik şu anda tarayıcılar arasında sürekli olarak desteklenmiyor gibi görünüyor.

— R. Hill

2

@ R.Hill 11 yıldan fazla bir süre önce açılan firefox için hata raporu bugzilla.mozilla.org/show_bug.cgi?id=308338 Btw: 'Orta' ve 'merkezi' arasındaki fark nedir?

— mxmlnkn

9

Yanlışlıkla reddedildi ve daha önce aynı hatayı yaptığım için geri alamıyorum. ☹ alignment-baseline: centralyapar değil FireFox'ta SVG lezyonu için çalışma ve bu tasarımla gibi görünüyor. dominant-baseline: centralBu cevapta belirtildiği gibi şimdiye kadar denediğim her tarayıcıda çalışıyor: stackoverflow.com/a/15997503/1450294

— Michael Scheper

228

SVG özelliklerine göre alignment-baselinesadece uygulanır <tspan>, <textPath>, <tref>ve <altGlyph>. Anladığım kadarıyla, <text>bunların üstündeki nesneden dengelenmesi için kullanılması . Bence aradığın şey dominant-baseline.

Olası değerler dominant-baseline:

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

Kontrol için W3C öneri baskın-bazal özelliğinin her olası değeri hakkında daha fazla bilgi için.

— toutankh
kaynak

9

Bu ("hizalama temel" özelliği ile çalışma değildi) Firefox ile ilgili sorunlarımı düzeltti. "Baskın taban çizgisi" Chrome ve Firefox'ta çalışır. Teşekkürler!

— Mariano Desanze

5

Bunun bu noktada IE'nin herhangi bir sürümünde çalışmadığı için, ne yazık ki birçok gerçek dünya uygulaması için gerçekten yararlı değil.

— Yona Appletree

3

IE, baskın taban çizgisini veya hizalama taban çizgisini desteklemediğinden, bu özellik için desteği kontrol edebilirsiniz element.hasAttribute('dominant-baseline')ve yanlış döndürürse dy=-0.4em, bu yanıtta belirtildiği şekilde uygulayın geçerlidir stackoverflow.com/a/29089222/2296470

— Tigran

1

baskın taban çizgisi: benim durumumda merkezi çalıştı. Teşekkürler!

— Liam Mitchell

1

unutmayın baskın-bazal IE10-12 tarafından desteklenmez ve Edge16

— japrescott

47

attr ("baskın taban çizgisi", "orta")

— user1087079
kaynak

1

Bu, karakterin ortasına göre hizalanır (yazı tipi gliflerinin güzel oynadığı kadar), bunun bu soruya nasıl bir cevap olduğundan emin değilim.

— matanster

3

Bu, d3 veya nitelik atama jquery yöntemidir

— glif

1

Bu çözüm, satır taban çizgisini metnin dikey merkezine yerleştirir. Yani y koordinatı dikey merkezdedir. Aradığım cevap buydu. Teşekkürler.

— Henry

1

Yanıtın çekirdeği doğrudur - baskın taban çizgisi özniteliğini merkeze ayarlayın, ancak attr () yerel bir JS işlevi değildir ve hiçbir açıklama yoktur.

— jave.web

30

Bunu IE'de test ediyorsanız, baskın taban çizgisi ve hizalama taban çizgisi desteklenmez.

IE'de metin ortalamanın en etkili yolu, "dy" ile böyle bir şey kullanmaktır:

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

Negatif değer onu yukarı kaydırır ve pozitif bir dy değeri aşağı kaydırır. -.4em kullanmanın bana dikey olarak -.5em'den biraz daha merkezli olduğunu gördüm, ama bunun yargıcı olacaksın.

— whyoz
kaynak

5

IE'de çalışan tek cevaba sahip olduğunuz için teşekkür ederiz. Bunu yapmak zorunda olduğumuz utanç verici, ancak diğer cevaplar Chrome / FF'de her şeyin çalışmasını sağlamak için önemli miktarda zaman harcadı, ardından tarayıcı testi sırasında IE'de çalışmadığını tespit etti.

— Yona Appletree

Güzel ve basit bir karar! Ve bunu destekleyen tarayıcılarda metin konumu üzerindeki etkisini atlamak için "hizalama temel" özelliğini kaldırmayı unutmamalıyız.

— YaTaras

7

SVG Tavsiyesine baktıktan sonra , taban çizgisi özelliklerinin, özellikle farklı yazı tiplerini ve / veya dilleri karıştırırken metni diğer metne göre konumlandırmak anlamına geldiğini anladım. Metni üstte olacak şekilde postalamak istiyorsanız, ykullanmanız gerekir dy = "y + the height of your text".

— rjax
kaynak

Spec bağlantısı takdir, bazı gerçekten yararlı okuma orada. "<list-of-lengths>"Örneğin (bağlantılı) seçeneğin farkında değildi ( karakter başına manipülasyona izin veriyor)

— brichins