垂直对齐 SVG 文本条纹

Posted 2023-03-05

【中文标题】垂直对齐 SVG 文本条纹

【英文标题】：Vertically align SVG text stripes

【发布时间】：2020-09-26 20:57:51

【问题描述】：

我可以使用什么 SVG 技术来完美地垂直对齐文本条纹？这个 SVG 使用 rect 制作水平条纹，并尝试在每个条纹上分层 text 以完美的垂直对齐，但它看起来有点偏离。我正在寻找一种适用于不同字体的跨浏览器技术。

<svg viewbox="0 0 300 300"  style="font: 1em/1 sans-serif">
  <title>flavors</title>
  <rect   x="0" y="0" fill="lime" />
  <rect   x="0" y="100" fill="yellow" />
  <rect   x="0" y="200" fill="plum" />
  <text alignment-baseline="middle" font-size="50" x="10" y="50" fill="black">APPLE</text>
  <text alignment-baseline="middle" font-size="50" x="10" y="150" fill="black">BANANA</text>
  <text alignment-baseline="middle" font-size="50" x="10" y="250" fill="black">CHERRY</text>
</svg>

【问题讨论】：

请查看alignement-baseline 的浏览器兼容性，而不是使用alignment-baseline，您可以使用dy 将文本的位置更改为您需要的位置：<text font-size="50" x="10" y="50" dy=".25em" >APPLE</text>

谢谢y 和dy 可以调整它，但数量似乎因字体而异。我可以说支持alignement-baseline，因为更改值会更改对齐方式。 MDN 说? 表示未报告。他们将其定义链接到 SVG 1.1

感谢您也添加了代码 sn-p runner :)

其实dy应该是字体大小的1/4左右

使用ex 像dy=".2ex" 似乎是迄今为止最好的方式

【参考方案1】：

要获得可靠的结果，您需要指定要使用的确切字体。目前你只是依赖默认字体。不管那可能是什么。默认字体取决于浏览器、浏览器设置和/或操作系统。

还请记住，并非每种字体都包含alignment-baseline 使用的数据。这就是为什么它建议您不要依赖alignment-baseline，除非您（a）知道您使用的确切字体支持它，并且（b）可能使用的每个浏览器都支持alignment-baseline和（c）无处不在，显示 SVG，有该字体可用。

替代dy 技术只要求您知道该字体可用。

例如，如果您知道 Arial 将始终可用，您可以使用 dy 或 0.35em，这已知是 Arial 的正确值。由于它使用em 单位，它适用于任何字体大小。

<svg viewbox="0 0 300 300"  style="font-family: Arial">
  <title>flavors</title>
  <rect   x="0" y="0" fill="lime" />
  <rect   x="0" y="100" fill="yellow" />
  <rect   x="0" y="200" fill="plum" />
  <text font-size="50" x="10" y="50" fill="black" dy="0.35em">APPLE</text>
  <text font-size="50" x="10" y="150" fill="black" dy="0.35em">BANANA</text>
  <text font-size="50" x="10" y="250" fill="black" dy="0.35em">CHERRY</text>
</svg>