html - Safari 中 HTML 和 SVG 跨度渲染之间的奇怪差异

Question

这个问题有点具体，我希望这里有人能为我提供一些可能的解决方案。

以下所有要点都很重要:

• 我正在编写一些将在第三方手持设备上读取的 HTML 页面。

• 为了适应这个设备的要求，每个词都必须在一个单独的范围内，这是为了我不允许进入的设备即将推出的功能，但它必须像这样格式化.

• 此 HTML 是从 SVG 转换而来的，SVG 是从 Adob​​e Illustrator 文档创建的。

• 我唯一可以控制 HTML 创建的地方是从 SVG 到 HTML 的转换。

我的问题是，在 SVG 中，文本被分解为“文本”节点和 tspan 节点。看看这个简单的 SVG，注意我是如何在第一个 tspan 上改变 Y 坐标的。

<text><tspan y="50">Hello</tspan><tspan> World</tspan></text>

当它在基于 webkit 的浏览器(如 safari)中呈现时，句子“Hello World”会在“Hello”一词的旁边显示“World”一词。

在我转换后的 HTML 示例中:

<div><span style="position:absolute;top:50px;">Hello</span><span> World</span></div>

“Hello”以 50 的 y 偏移量显示，但是“World”显示在页面左上角的原点。

这令人沮丧，因为我没有“世界”跨度应放置在 SVG 中的位置的坐标(因为 Illustrator 不需要此坐标来正确渲染它)。此外，SVG 中可能有一个或多个 tspan 的位置发生了变化，这将阻止我将样式应用于 div。

简而言之，有谁知道我是否可以设置一个属性将第二个跨度直接放在第一个跨度之后？

谢谢

Answer 1

您可以为 div 而不是 span 设置样式

<div style="position:absolute;top=50px;"><span>Hello</span><span> World</span></div>

这将使文本 block 保持在一起并相对于彼此定位，但您仍然可以为每个单词设置一个跨度