HTML和SVG之间的奇怪差异跨越Safari中的渲染

Question

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

以下所有要点都很重要：

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

• 为了满足此设备的要求，每个单词必须位于单独的范围内，这是针对我不允许进入的设备的即将推出的功能，但必须将其格式化为

• 此HTML正在从SVG转换，SVG是从Adobe Illustrator文档创建的。

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

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

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

当这在基于webkit的浏览器中呈现时，如safari，会在单词“Hello”旁边显示“Hello World”一词，并显示“World”一词。

在我转换的HTML示例中：

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

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

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

简而言之，有没有人知道我是否可以设置一个属性来直接放置第二个跨度？

谢谢

Answer 1

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

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

这会将文本块保持在一起并相对于彼此定位，但是你仍然可以为每个单词设置一个范围

Answer 2

在尝试了很多不同的事情之后想出了这个。

实际上非常简单，但是我没有意识到跨度可以嵌套，所以我要让自己离开。

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

诀窍是将所有需要在一个范围内组合在一起的单词换行。希望这有助于任何陷入类似问题的人。