CODEWITHSUNDEEP
javascriptgoogle-chromefirefoxsvgd3.js
ReV
ReV

Reputation: 78

SVG dx+text-anchor middle have different behavior into chrome and firefox

I would like to write a code not browser dependent. My goal is to display an arc with a centered text inside:

enter image description here

To do so I use d3.js to draw an arc:

var elem = vis.append("svg:path")
    .attr("d", myarc(inR, outR, startA, endA, orient))
    .attr("transform", "translate(200,200)")
    .attr("fill", "rgb(255, 255, 255)")
    .style("stroke-width", 0.2)
    .style("stroke", "#BBB")
    .attr("id", "0_1");

Then I bind the text to it to make it follow the arc and then shift it from half the radius of the arc in the y direction and half the angle length in the x direction:

text.append("text")
    .style("font-size", "14px")
    .style("font-weight", "bold")
    .attr("dx", spaceLength / 2.0)
    .attr("dy", 25)
    .attr("method", "stretch")
    .attr("spacing", "auto")
    .append("textPath")
    .attr("xlink:href", "#0_1")
    .attr("text-anchor", "middle")
    .text("Test text :)");

My problem is that Chrome and Firefox do not render this code the same way. The dx attribute is shifting two times more the text to the right in Chrome than in Firefox.

Here is how it renders with Firefox:

enter image description here

To make it work in Firefox I have to replace:

    .attr("dx", spaceLength / 2.0)

by 

    .attr("dx", spaceLength)

How to make this code display the same on both browsers without implementing a browser detection function?

What is creating this difference of rendering in the two browsers?

The full code sample reproducing the issue is available here: http://jsfiddle.net/taxQK/1/

Thanks a lot

Upvotes: 2

Views: 814

Answers (2)

Code Whisperer
Code Whisperer

Reputation: 23652

This library has implementations of rotating text on the outside of a circle that works in Firefox, Chrome, Safari and IE. Though I do not recommend using it, its source code should reveal the trick.

https://github.com/danielstern/MagicCircles

Disclosure: this is my library.

Upvotes: 1

Robert Longson
Robert Longson

Reputation: 123985

Text support was rewritten in Firefox 25 which has just been released and your example works as you expect when I try in that version. It may be that all you need to do is update to the latest released version of Firefox.

Upvotes: 2

Related Questions