Skip to content

Instantly share code, notes, and snippets.

@tmcw
Created May 8, 2013 15:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tmcw/5541050 to your computer and use it in GitHub Desktop.
Save tmcw/5541050 to your computer and use it in GitHub Desktop.
Firefox SVG Bug

A testcase for a bug in Firefox's SVG implementation. In WebKit browsers, a grey dot is shown. In Firefox, nothing appears.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.radial-menu-background {
stroke: black;
stroke-opacity: 0.5;
}
</style>
<body>
<script src="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment