html - svg 中的 <Text> 标签在 chrome 中无法正确呈现

Question

背景

1. 应用程序 UI 是在 icefaces 中构建的

2. 在 iceface 工作时，从服务器获取一段 javascript 代码，这段代码在浏览器上运行以更新 svg 元素。因此，svg 被渲染 第一次动态

问题

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

First rendering looks like this

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

1. 浏览器窗口的大小已更改
2. 中的任何元素 <svg>通过开发者工具更改标签

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

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

查询

1. 有没有办法在 chrome 中强制重新加载 svg？
2. 有什么可以替代使用 <text>用于在 svg 中定位文本的标记？
3. 还有其他解决方案吗？

注意:- 相同的场景在 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>

Answer 1

我遇到了同样的问题。我认为这是 chrome(或 Linux 的 chromium)的问题。

只是让它正常工作的快速修复。我的解决方案使用了 Inkscape。

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

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