垂直对齐SVG文本条纹

Question

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

<svg viewbox="0 0 300 300" width="100%" style="font: 1em/1 sans-serif">
  <title>flavors</title>
  <rect width="300" height="100" x="0" y="0" fill="lime" />
  <rect width="300" height="100" x="0" y="100" fill="yellow" />
  <rect width="300" height="100" 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>

Answer 1

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