SVG 中的文本不会在 Chrome 和 IE 上显示答案

【问题标题】：Text in SVG dont shown at the Chrome and IESVG 中的文本不会在 Chrome 和 IE 上显示
【发布时间】：2013-10-02 15:24:00
【问题描述】：

我有一些网络素材图像作为 Microsoft Visio 元素集文件 (.vss)。我将其转换为 SVG 文件。

它可以转换，但 Chrome 29 和 IE9 不显示文本。 Opera 12 和 Firefox 24 显示文本（但 Firefox 有字距调整问题）。

文本在这里非常重要，因为 SVG 应该用作带有端口号等的参考书。

如何在此处修复文本？

Sample SVG file

此 SVG 文件在不同浏览器上的屏幕截图：

【问题讨论】：

文件中没有字距调整，而是所有字符都单独定位。如果您删除所有出现的 font-weight="bold"，它在 Firefox 中看起来会更好
一点点……谢谢，但我对 Chrome 和 IE 上的文本非常感兴趣。那是最重要的——在这里显示文本。有什么想法吗？
我不知道这就是我使用评论而不是答案的原因。我没有实现那些浏览器;-)
哦。还是谢谢你。

标签： internet-explorer google-chrome firefox svg visio

【解决方案1】：

当您使用嵌入的 Word 文档（或使用“插入对象”嵌入的其他文件）的 Visio 绘图时，我发现 SVG 渲染出现问题。如果您有这种情况，请先尝试将它们转换为本机 visio 格式，然后再次导出为 SVG - 可能会有所帮助。您的文件现在在“svg”中有“svg”。

无论如何，这个问题看起来像是 IE9 SVG 渲染中的一个错误（另一个）:-) 基本上，以下代码片段似乎在 IE9 中被错误地渲染（完整示例）：

<svg width="10in" height="10in" viewBox="0 0 10 10" 
     xmlns="http://www.w3.org/2000/svg" >

    <g transform="matrix(100, 0, 0, 100, 2, 2)">
      <text font-size="0.01">FOO</text>
    </g>

</svg>

问题是，字体首先放大 x100 倍，然后缩小 x100 倍（这对于 Visio SVG 导出引擎来说是一件愚蠢的事情），但无论如何其他浏览器都会以某种方式处理它。

如果您能分享原始的 visio 绘图，可能会有所帮助。

【讨论】：

哦«IE bug»听起来不错，但我需要解决它，否则会很糟糕。这是original .VSS file。我会尝试检查转换，你注意到了。
是的，您的帮助很棒！有用！有matrix(98.323, 0, 0, 98.323, 0.3653, 11.074) 和font-size="0.010081" 和x="0.028478 0.035202 0.04136 0.049202 0.054808" 和y="0.009073 0.009073 0.009073 0.009073 0.009073"。矩阵将字体大小设置为 98，然后将字体大小和 x/y 划分为 98。这导致 IE 和 Firefox 出现问题。我只是修复了这种愚蠢，它变成了很好的文本视图。 You can see a difference here

【解决方案2】：

登录到 Chrome 控制台时，我看到您的文本以非常小的尺寸存在：

<g xmlns="http://www.w3.org/2000/svg" font-size="0.010081" font-family="ARIAL" font-weight="bold"> <text stroke="none" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" x="0.028478 0.035202 0.04136 0.049202 0.054808" y="0.009073 0.009073 0.009073 0.009073 0.009073">Power</text> </g>

以及围绕它的矩阵变换。不知道罪魁祸首在哪里，在Illustrator中打开一团糟……

我在括号中得到的是删除上面组中的text-rendering="geometricPrecision" 属性。我会看看我是否能在这个之后找到更精确的。

【讨论】：

移除或移除 Blink 引擎浏览器中的 text-rendering="geometricPrecision" 显示文本，谢谢！但是还有IE9……
抱歉，这里只有mac…