SVG 文本路径在 IE 中无法正常工作答案

【问题标题】：SVG text path not working correctly in IESVG 文本路径在 IE 中无法正常工作
【发布时间】：2014-07-27 22:01:04
【问题描述】：

我正在制作一个 SVG，它的文本沿着圆形线路径。

文本在 Firefox 和 Chrome 中看起来不错，但在 IE11 中看起来不正确。有时只出现文本路径上的第一个字母。

     d3.select("#svg")
.append("path")
  .attr("id", "path1")
  .attr("d", "M 0,-1   C 0.5523, -1   1, -0.5523    1,0  C 1, 0.5523    0.5523, 1     0,1  C -0.5523, 1   -1, 0.5523    -1,0         C -1, -0.5523  -0.5523, -1   0,-1")
  .attr("transform", "scale(50, 50) translate(5,5)");


  d3.select("#svg")
  .append("text")
  .append("textPath")
  .attr("xlink:href", "#path1")
  .style("font-size", "10px")
  .text("hello radial world")
  .attr("fill", "blue")

【问题讨论】：

您确定浏览器模式和文档模式设置为IE 8+？
我不确定。是通过设置doctype来完成的吗？
查看此讨论：stackoverflow.com/questions/17871124/…，确保您至少设置了 IE 9，因为 IE8 不支持 SVG。
CSS 文件使用-webkit- 规则。
这个example是我见过的最接近的东西。

标签： javascript html css svg d3.js

【解决方案1】：

我终于弄明白了。

这是 SVG 中圆形路径外部文本的获胜公式，它与 IE、Firefox 和 Chrome 兼容！

var size = 50; // radius of ring
var centerX = 100;  // center x
var centerY = 100;  // center y

d3.select("#myDiv")
  .append("path")
.attr("id", "path1")
  .attr("d", "m "+centerX+", "+centerY+" a -"+size+",-"+size+" 1 1,1 "+size*2+",0 a -"+size+",-"+size+" 1 1,1 -"+size*2+",0")
 // do not use transform scale with text paths, IE does not like it! Define variables like this.

  d3.select("#myDiv")
    .append("text")
    .append("textPath")
    .attr("xlink:href", "#path1")
    .style("font-size", "10px")
    .style('letter-spacing','0px')
    .text("hello radial world")
    .attr("fill", "blue")

【讨论】：

谢谢。正是我需要的。让我免于自己弄清楚。

【解决方案2】：

您遇到的一些问题是由于您在数组声明中包含了一个额外的逗号，例如在您的 html 页面的第 151 行：

var 选项 = [{
    名称：“铸造”，
    链接：“铸造”，
    颜色：“#737373”，
}, {...

最后一个数组项 'color: "#737373",' 后面的额外逗号是无效的 Javascript 语法 (ECMA3)，会扰乱许多浏览器。

请看这个问题的答案：

Are trailing commas in arrays and objects part of the spec?

您的 Home.js 和 magic.circles.js 中似乎有类似的错误。像这样的尾随逗号在其他一些语言中是合法的，但不是 Javascript。 Firefox/Chrome/Safari 似乎可以容忍这个错误，但大多数版本的 IE 都会卡住它。

这个网站有一个方便的工具来找到你的流氓逗号：

http://trailingcomma.com/

【讨论】：

嘿下划线。感谢您的回答。我从页面中删除了尾随逗号，但错误仍然存在。最好的问候，DS
嘿小船，你能为magicCircles 放一个jsFiddle 吗？您的页面有很多依赖项，我无法在本地复制它。此外我想玩圈子:-)