Inkscape 生成的 flow* 元素的浏览器友好替代方案是什么?

What are browser-friendly alternatives for the flow* elements generated by Inkscape?

在我正在进行的项目中,我有一些视图使用 Inkscape 生成的地图。但是,我们 运行 遇到了一些小问题...具体而言,一些地图根本不呈现文本。

在 Whosebug 上 some research 进入这个问题后,我发现有一些很好的理由:

  1. Inkscape 生成 SVG 1.1 文档,而不是 SVG 1.2 文档,尽管包含 flowRootflowRegionflowPara 元素。我将我的地图更新为 1.2 版文档,但没有帮助。
  2. 我读到那些 flow* 元素是 SVG 1.2 标准的一部分,但实际上并没有在大多数浏览器中实现,因为 SVG 1.2 从未被任何人接受。这就解释了为什么没有多少哄骗导致我们地图上的文字出现。
  3. 如果要在浏览器中查看您的 SVG,通常建议使用 <text> 而不是 <flowPara>

这揭示了一个更深层次的问题,我无法从 Google 搜索中找到答案:Inkscape 正在用 其他 废话填充文档 可以呈现(分别为flowRootflowRegion),但是IE/Chrome没有实现。

问题:

  1. 哪种广泛实施的 SVG 标签可以很好地替代 flowRoot
  2. 哪种广泛实施的 SVG 标签可以很好地替代 flowRegion
  3. 如果不存在这样的替代方案,是否有一些简单的方法,甚至是一般的启发式方法,来说明如何最好地修改 SVG 文档以使其在现代浏览器(IE11 或 Chrome)上完全可见?

在 Inkscape 中,select 流动的文本对象。转到“文本”菜单,然后 select "Convert to text"。

流式文本元素现在将是纯 <text> 元素,并且会在浏览器中正确显示。

如果您将文档另存为 "Optimised SVG" Inkscape 将警告您无法在浏览器中呈现的流程元素。