Question

背景

应用程序UI内置于icefaces
当iceface工作时，从服务器检索一段javascript代码，此代码在浏览器上运行以更新svg元素.Hence，svg呈现动态第一次

问题

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

First rendering looks like this

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

浏览器窗口的大小已更改
中的任何元素 <svg>标记通过开发人员工具

从上面的两点可以看出，svg本身在第一次加载时没有正确呈现（动态）。一旦我们做了以上任何一点，铬就会正确地渲染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>

Answer 1

我有同样的问题。我认为这是chrome（或Linux for chromium）的问题。

正如快速解决方案一样。我的解决方案使用Inkscape。

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

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

Answer 2

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

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

<强> 1。正文长度

<强> 2。 lengthAdjust

svg中的<text>标签无法在chrome

2 个答案: