SVG dominant-baselineがSafariで動作しない

Question

私はSVGテキストの位置を、それが位置するy-位置よりも完全に上になるように配置しようとしています。 text-after-edgeの支配的なベースラインは、このための適切な設定のようです。

これはChromeでもうまくいきますが、Safari text-after-edgeでは、y-位置を中心にテキストがレンダリングされます。

私はこのcodepenに見られるように、更なる探求：ここ

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

はChromeで出力されます。

そしてSafariで：

あなたはレンダリングが異なる支配的なベースラインの数を見ることができるように。

私は最近、同じ問題に遭遇した、と私の場合で働いていた解決策を見つけた

Answer 1

：

のみ、それらの両方が、私は「すべてのブラウザで動作しないことを見つけるためにdominant-baselineとbaseline-shiftプロパティをしようとした後、あなたが<text>要素のdy属性を使用して、グリフが<textPath>に沿って配置された後にそれをシフトすることができると教授は指摘しました。これは、既知または独立して計算しなければならないshiftText値の知識に依存すること

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

は注意：ここで

は、私の解決策を説明するためにいくつかの擬似コード/ JSXです。これが指定されていない場合、私は前方の唯一の道は、dominant-baselineとbaseline-shift使用のブラウザを区別しての組み合わせを使用することだと思います。

Answer 2

dyを使用するというヤコブの提案は、最も簡単で信頼性の高いソリューションです。また、em単位で定義された値を使用することをお勧めします。

1emは、下位デセンダの下端から上位の上端またはアクセントの上端までのフォントグリフの高さです。

下降器は、EMの四半期を中心に、一般的です。だから、回線使用dy="-0.25em"上のテキストを調達します。これに対応し、線の下にハングアップする、dy="0.75"を使用しています。以下の例を参照してください。

<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単位を使用する主な利点は、フォントサイズとは無関係であるということです。したがって、フォントに合うように値を微調整することができ、それらのem値は指定した任意のフォントサイズで自動的に機能します。