<Text> SVG中的代码无法在Chrome中正确显示

Question

背景

1. 应用程序用户界面内置在icefaces中

2. 当iceface正常运行时，会从服务器上检索一段javascript代码，然后在浏览器上运行该代码以更新svg元素，因此svg首次动态呈现

问题

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

第一次渲染看起来像这样

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

1. 浏览器窗口的大小已更改
2. <svg>标记中的任何元素都可以通过开发人员工具进行更改

从以上两点可以看出，svg本身在第一次加载时（动态）无法正确渲染。 只要我们完成以上2点中的任何一项，chrome就会正确渲染svg。

调整窗口大小/在开发人员工具中更改任何svg元素会自动将其修复为此

查询

1. 有没有办法在Chrome中强制重新加载svg？
2. 除了使用<text>标记在svg中定位文本之外，还有什么替代方法？
3. 还有其他解决方案吗？

注意：-同样的情况在Firefox中非常适用！

尽管完整的svg代码很大，但这是HTML片段，负责呈现svg文本

<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>

Answer 1

我遇到过同样的问题。 我认为这是Chrome（或Linux中的Chrome）的问题。

只是快速解决方案，以使其正常工作。 我的解决方案使用Inkscape。

• 首先，使用居中的文本使用Inkscape制作所需的SVG。
• 然后选择文本，然后按Ctrl + Shift +C。这会将文本从文本转换为路径对象，从而绕过了chrome问题。

我知道这不是最好的解决办法，但是可以解决。 使其固定工作的一种方法。

Answer 2

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

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

1. textLength

2. lengthAdjust