CODEWITHSUNDEEP
javascripthtmlcsssvgd3.js
Code Whisperer
Code Whisperer

Reputation: 23652

SVG text path not working correctly in IE

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

Upvotes: 1

Views: 1513

Answers (2)

Code Whisperer
Code Whisperer

Reputation: 23652

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

Upvotes: 2

underscorePez
underscorePez

Reputation: 897

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/

Upvotes: 1

Related Questions