svg 中的 <Text> 标记无法在 chrome 中正确呈现答案

【问题标题】：<Text> tag in svg not rendering correctly in chromesvg 中的 <Text> 标记无法在 chrome 中正确呈现
【发布时间】：2017-04-24 21:46:43
【问题描述】：

背景

应用程序 UI 内置于 icefaces
当iceface工作时，从服务器检索一段javascript代码，这段代码在浏览器上运行以更新svg元素。因此，svg被渲染第一次动态地

问题

问题在于 svg 中的 <text> 标记无法正确呈现。 <text> 标记不遵循其属性中提到的位置 x,y。相反，它只是停留在原点（0, 0），因为不同 <text> 标记中的每个文本都相互重叠。

First rendering looks like this

但是，在以下情况下，文本会自动正确定位：-

浏览器窗口大小改变了
中的任何元素 <svg> 标签是通过开发者工具修改的

从以上两点看来，svg 本身在第一次加载时（动态）没有正确渲染。只要我们执行上述 2 点中的任何一个，chrome 就会正确呈现 svg。

Resizing windows/Altering any svg element in developer tool automatically fixes it to this

查询

有没有办法在 chrome 中强制重新加载 svg？
除了使用 <text> 标签在 svg 中定位文本还有什么替代方法？
还有其他解决方案吗？

注意：-相同的场景在 Firefox 中完美运行！

虽然完整的 svg 代码很大，但这里是负责渲染 svg 文本的 HTML 部分

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="100%" minwidth="1" width="100%" x="0" y="0">
    <g transform="matrix(57.22751322751323,0,0,57.22751322751323,360.6538835978836,26.883768888888916)">
        <g>
            <text font-size="1" style="font-family:'Arial', sans-serif; stroke:none; fill:black;" transform="scale(0.048895)" x="-10.779220779220779" y="2.1136363636363633">
                <tspan x="-10.779220779220779">Overlapping text</tspan>
                <tspan dy="1em" x="-10.779220779220779">Overlapping text</tspan>
            </text>
            <text font-size="1" style="font-family:'Arial', sans-serif; stroke:none; fill:black; font-weight:bold;" transform="scale(0.08001)" x="-6.587301587301588" y="-0.75">
                <tspan x="-6.587301587301588">Overlapping text</tspan>
            </text>
        </g>
    </g>
</svg>

【问题讨论】：

如果您发现了 Chrome 错误，请将其报告给 Chrome 的错误跟踪器。
我在 Chromium bug repo 上报告了同样的情况。这是link
在 chrome 版本 49.0.2623.112 m 上完美运行。可能是回归。

标签： html css google-chrome svg icefaces

【解决方案1】：

我遇到了同样的问题。我认为这是 chrome（或用于 Linux 的 chromium）的问题。

作为让它工作的快速修复。我的解决方案使用了 Inkscape。

首先，使用带有居中文本的 Inkscape 制作您想要的任何 SVG。
然后在选定文本的情况下按 Ctrl + Shift + C。这会将其从文本转换为路径对象，从而绕过 chrome 问题。

我知道这不是最好的解决方法，但它确实有效。只是一种让它工作直到它被修复的方法。

【讨论】：

【解决方案2】：

我也遇到了这个问题。但似乎这是由于用于文本的字体加载较晚。

您也可以尝试使用以下两个属性：

1.文本长度

2。长度调整

【讨论】：