D3 Examples - Firefox SVG Bug

xxxxxxxxxx
 
​
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.radial-menu-background {
    stroke: black;
    stroke-opacity: 0.5;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
​
var width = 200,
    height = 200;
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
​
var r = 20, a0 = 0, a1 = 0;
​
svg.append('path')
    .attr('class', 'radial-menu-background')
    .attr('d', 'M' + r * Math.sin(a0) + ',' +
                     r * Math.cos(a0) +
              ' A' + r + ',' + r + ' 0 0,0 ' +
                     r * Math.sin(a1) + ',' +
                     r * Math.cos(a1))
    .attr('stroke-width', 50)
    .attr('stroke-linecap', 'round');
​
</script>
​
    