用于 SVG 和 Angular 的 IE 10 的奇怪问题答案

【问题标题】：Weird Issue with IE 10 for SVG and angular用于 SVG 和 Angular 的 IE 10 的奇怪问题
【发布时间】：2015-04-29 06:14:32
【问题描述】：

上周我遇到了一个奇怪的问题。我使用 SVG 进行渲染的应用程序之一。这些东西在 Chrome、Safari 和 Mozilla 上运行良好。

浏览器的输出如下图：！[Chrome、Safari 和 Mozilla 输出][1]

现在我在这里使用了 SVG，并为属性“d”的文本路径提供了与开放论坛中提到的相同的 id（如何使用 svg 创建弧）。

现在当我在 IE 上运行相同的代码时。输出真的很奇怪。我的文字没有走弧线。我正在为这个项目使用角度。 IE 的输出： ![IE 输出][2]

请帮助我为什么会发生此问题。我尝试了很多博客，但没有一个工作。主要是几何精度。其余为： SVG is not rendering in IE 10 with Doctype HTML 4 SVG is not rendering in IE 10 with Doctype HTML 4

【问题讨论】：

请修复损坏的链接。我们无法从您的描述中判断可能有什么问题。
chrome结果是creativity-labs.com/RefrenceImage/ChromeSnap.png IE结果是creativity-labs.com/RefrenceImage/IEissue.png
您能否提供您的代码生成的 SVG 输出示例，以便我们自己查看 IE 中出了什么问题？
是的，实际上您可以使用现场示例 smtest14.com 然后单击主页上的巧克力输入用户名：test@test.com 密码：test 然后您会进入错误所在的页面 NOW ADD TEXT(ABC ）在文本框中输入任何文本，然后单击添加现在在最右侧的曲线（圆、弧）中是否存在单击这些并查看我提供到快照中的错误
这是 IE 渲染的问题，因为在 chrome 和 Mozilla 上不一样。即使我尝试对值和文本进行硬编码，但文本仍然没有走弧线。或者这个问题是由于 Angular js 无法弄清楚

【解决方案1】：

我终于得到了答案。

实际上，在 IE 中，我使用 getComputedTextLength() 作为文本。在此之前，我提到了字体大小和文本。但是忘了提fontfamily。

现在我的所有字体的宽度都返回了相同的值，因为即使我改变了它也在考虑 Arial。其他 Bowser 根据字体采用此长度。但是 IE 我们还需要提供字体类型。这样就解决了

【讨论】：