Safari中HTML和SVG跨域呈现之间的奇怪差异

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

以下所有要点都很重要：

• 我正在编写一些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 World”将显示在单词“Hello”的旁边，单词“World”就在旁边

在我转换的HTML示例中：

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

你好，世界

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

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

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

---

谢谢

您可以设计div而不是span

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

你好，世界

---

这将使文本块保持在一起并相互相对定位，但你仍然可以为每个单词留出一个跨度

在尝试了一系列不同的方法后，你已经找到了这个答案

这其实很简单，但我没意识到跨度可以嵌套，所以我要放手了

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

你好，世界

---

诀窍是将所有需要分组的单词包装在一个范围内。希望这能帮助那些陷入类似问题的人。

回答得好，但是div中可能有一个或多个tspan位置更改。我已编辑了我的问题。为了修复此问题，缺少一些信息。第一：他们的立场是如何改变的？相对于其他TSPAN？第二：如果位置改变了，你知道它的确切变化吗（例如：如果位置改变了，你得到的是x和y或dx和dy）？在这种情况下，为div和alter设置样式，并在跨度上加上边距。我终于明白你想做什么了。是的，我没有意识到，幸运的是，我花了整个编程生涯，而不必在HTML上撒尿。