SVG text path not working correctly in IE

Question

I am making an SVG which has text along a circular line path.

The text looks great in Firefox and Chrome, but doesn't look right in IE11. Only the first letter on the text path appears, sometimes.

Here's 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")

Are you sure that the browser mode and document mode are set to IE 8+? — Danyu, Jun 06 '14 at 15:53
check this discussion: http://stackoverflow.com/questions/17871124/how-to-bring-back-browser-mode-in-ie11, make sure you set at least IE 9, because IE8 does not support SVG. — Danyu, Jun 06 '14 at 15:59
It is not entirely clear to me how much to blame IE for this. Check this [FIDDLE](http://jsfiddle.net/jr2z6/) in **IE11**. Looks like something in your path instructions is causing some trouble. — FernOfTheAndes, Jun 13 '14 at 15:32
Yes, it is the path. I have been working on it but I can't find one that will work in all browsers and display the text on the outside of the circular path. If you had one, I would give the bounty. — Code Whisperer, Jun 13 '14 at 15:33
This [example](http://bl.ocks.org/musically-ut/5278601) is the closest thing I've seen. — FernOfTheAndes, Jun 13 '14 at 15:43
@FernOfTheAndes that is close but as the question stated the text needs to appear on the outside of the circle. — Code Whisperer, Jun 14 '14 at 07:15

score 2 · Accepted Answer · answered Jun 14 '14 at 23:17

I ended up figuring this out.

Here is the winning formula for text on the outside of a circular path in SVG that's compatible with IE, Firefox AND 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")

Thanks. Exactly what I needed. Saved me from figuring it out myself. — Floris, Oct 28 '15 at 13:50

score 1 · Answer 2 · edited May 23 '17 at 10:27

1

some of the problems you are having are due to you including an extra comma in your array declarations, such as on line 151 in your html page:

var options = [{
    name: "Casting",
    link: "casting",
    color: "#737373",
}, {...

The extra comma after the last array item 'color: "#737373",' is invalid Javascript syntax (ECMA3) and will upset many browsers.

Please see the answer to this question:

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

It looks like you have similar errors in Home.js and magic.circles.js. Trailing commas like this are legal in some other languages, but not Javascript. Firefox/Chrome/Safari seem to be tolerant of the error, but most versions of IE will choke on it.

This site has a handy tool to find your rogue commas:

http://trailingcomma.com/

edited May 23 '17 at 10:27

Community

1
1

answered Jun 10 '14 at 21:21

underscorePez

897
9
19

Hey Underscore. Thanks for the answer. I removed the trailing commas from the page but the error persists. Best regards,, DS – Code Whisperer Jun 11 '14 at 12:33
Hey Boat, could you put a jsFiddle up for magicCircles? Your page has a lot of dependencies and I can't reproduce it locally. Besides I want to play with the circles :-) – underscorePez Jun 11 '14 at 22:17

SVG text path not working correctly in IE

2 Answers2