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

Question

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

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

这是 the fiddle .

     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

我最终弄明白了这一点。

这是与 IE、Firefox 和 Chrome 兼容的 SVG 中圆形路径外部文本的成功公式!

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