SVG dominantı taban çizgisi Safari'de çalışmıyor

Question

SVG metnini konumlandırmaya çalışıyorum, böylece bulunduğu y yerinin tamamen üzerine yerleştir. Bunun için baskın bir temel olan text-after-edge uygun ayar olarak görünmektedir.

Bu, Chrome'da gayet iyi çalışır, ancak Safari text-after-edge ile y-konumunda ortalanmış metin oluşturur.

Ve Safari'de:

İşte https://codepen.io/anon/pen/obrreb?editors=1010

Chrome'da çıkışı: Bu codepen görüldüğü gibi

Ben daha araştırdı

Görüldüğü üzere, baskın temel çizgi oluşumlarının birçoğu farklıdır.

Answer 1

Geçenlerde aynı sorun koştu ve benim durumumda çalışan bir çözüm buldu

: bunlardan sadece ikisi Ben tüm tarayıcılarda çalışmadığını öğrenmek için dominant-baseline ve baseline-shift özelliklerini denedikten sonra

Desteklemeyi hedefleyen bir kolej, bir boyunca glifler yerleştirildikten sonra kaydırmak için <text> öğesinde dy özniteliğini kullanabileceğinizi işaret etti. Bu bilinen veya bağımsız hesaplanmalıdır bir shiftText değerinin bilgisine bağlı olduğunu

<g {...}> 
    <path 
    id={textPathId} 
    fill="none" 
    transform={…} 
    d={…} 
    /> 
    <text 
    textAnchor="middle" 
    fill={textFill} 
    dy={shiftText} 
    > 
    <textPath 
     xmlnsXlink="http://www.w3.org/1999/xlink" 
     xlinkHref={`#${textPathId}`} 
     startOffset="50%" 
    > 
     {text} 
    </textPath> 
    </text> 
</g> 

Bildirimi: Burada

bazı pseudocode/JSX benim çözüm göstermektir. Bu verilmezse, ilerideki tek yol, kullanılan tarayıcıları ayırt ederken dominant-baseline ve baseline-shift'un bir kombinasyonunu kullanmaktır.

Answer 2

Jakob'un dy kullanım önerisi en basit ve en güvenilir çözümdür. Ayrıca em biriminde tanımlanan değerleri kullanmanızı öneririm.

1em En alçak inişin alt kısmından en yüksek yükselticinin ya da aksanının en üstündeki yazı tipi glifinin yüksekliğidir. Desenler, tipik olarak em emirlerinin dörtte biri civarındadır. Bu nedenle, satırın üstündeki metni dy="-0.25em" kullanın. Buna karşılık, çizginin altına asmak için dy="0.75" kullanın. Aşağıdaki örneğe bakınız.

<svg width="100%" height="200"> 
 
    <line y1="100" x2="100%" y2="100" stroke="grey"/> 
 
    <text x="20" y="100" font="Arial, sans-serif" font-size="40"> 
 
    <tspan>Hanging</tspan> 
 
    <tspan y="100" dy="-0.25em">Hanging</tspan> 
 
    <tspan y="100" dy="0.75em">Hanging</tspan> 
 
    </text> 
 
</svg>

em birimleri kullanarak ana avantajı

onlar font boyutu bağımsız olmasıdır. Böylece değeri tam olarak yazı tipinize göre ayarlayabilir ve bu değerler, belirttiğiniz herhangi bir yazı tipi boyutu için otomatik olarak çalışır.