SVG 主导基线在 Safari 中不起作用 [英] SVG dominant-baseline not working in Safari

问题描述

我正在尝试定位 SVG 文本，使其完全位于其所在的 y 位置上方.text-after-edge 的主导基线似乎是为此的合适设置.

这在 Chrome 中运行良好，但在 Safari 中 text-after-edge 呈现的文本以 y 位置为中心.

我进一步探索，如本代码笔所示:

在 Safari 中:

如您所见，许多主要的基线渲染有所不同.

解决方案

Jakob 建议使用 dy 是最简单、最可靠的解决方案.我还建议您使用以 em 单位定义的值.

1em 是字体字形从最低降部底部到最高上升部或重音符号的高度.

下降通常约为 em 的四分之一.因此，要将文本提高到该行上方，请使用 dy="-0.25em".相应地，要挂在线下方，请使用 dy="0.75".请参阅下面的示例.

使用 em 单位的主要优点是它们与字体大小无关.因此，您可以调整该值以完全适合您的字体，这些 em 值将自动适用于您指定的任何字体大小.

I'm trying to position SVG text so that it site entirely above the y-location at which it is located. A dominant baseline of text-after-edge appears to be the appropriate setting for this.

This works just fine in Chrome, but with Safari text-after-edge renders with the text centred around the y-location.

I explored further, as seen in this codepen:

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

Here is the output in Chrome:

And in Safari:

As you can see a number of the dominant baseline renderings differ.

解决方案

Jakob's suggestion to use dy is the simplest and most reliable solution. I would also suggest you use values defined in em units.

1em is the height of the font glyph from the bottom of the lowest descender to the top of the highest ascender or accent.

Descenders are typically around a quarter of an em. So to raise the text above the line use dy="-0.25em". Correspondingly, to hang below the line, use dy="0.75". See the example below.

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

The main advantage to using em units is that they are independent of the font size. So you can tweak the value to suit your font exactly, and those em values will automatically work for any font size you specify.

这篇关于SVG 主导基线在 Safari 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！