SVG Dartboard

Free to use, all ID's inputted : ) (scroll to the bottom)

Why is 9 bright pink?

I used illustrator to make a SVG. SVG markup is like xml, so like html, so can contain ids... so can be targeted by jQuery : )

$("#dartboard #areas #s #s9").css("fill", "#fe26f6");

Remove this line in the script tag to put it back to its original colour.

NB. Its the CSS property fill you want to change

Change the size

In the svg change width="787px" height="774px" if you need to change the svg's size.

How do I target everything?

  • #areas = all areas
    • #s = all singles
      • #s1 = single 1
      • #s2 = single 2
      • #s3...
    • #d
      • #d1
      • #d2
      • #d3...
    • #t
      • #t1
      • #t2
      • #t3...
    • #bull
      • #Outer - look out for typos due to weird caps
      • #Bull - look out for selection errors - this is a 'circle' not a 'path'
  • #score
    • #score_1_ the numbers around the edge

Hiding stuff

Its just jQuery / id's so if you wanted to:

$("#dartboard #score").hide();

Or even:

$("#dartboard #score").hide().fadeIn();

The hover

I used jQuery's hover(), so that basically works like this:

$("#some-element")hover(function(){},function(){});

the first function fires when you hover over, and the second when you hover out. I just did some css to change the opacity.

$("#dartboard #areas g").children().hover(
	function(){
		$(this).css("opacity","0.6");
	},
	function(){
		$(this).css("opacity","1");
	}
)

Getting the id of what you hit

I've painstakingly entered every single ID for you in illustrator! That was a labour of love. So all you need to do is something like:

$("#dartboard #areas g").children().click(function(){
	alert($(this).attr("id"));
});

Want to use this in a project you're working on? Well of course you can!

Please follow the following rules:

  • Please drop me an if its anything exciting
  • Share a link with me, by or on twitter when you're finished!
  • If you make millions... let me have a teeny, tiny bit!

Download it here