Question

我正在制作一个沿圆形线路有文字的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")

Answer 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")

Answer 2

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

var options = [{
    name: "Casting",
    link: "casting",
    color: "#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/

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

2 个答案: