title: How do I indicate transparency in an SVG path in Google Maps API v3?
body: <p>I've been searching on and off stackoverflow and haven't found the answer, so here goes...</p>
  
  <p>I have a custom SVG image path of a bus (see below) and it's drawing properly and "cutting out" portions that I want transparent as it should, just not the headlights.  I've looked through the SVG path data docs at <a href="http://www.w3.org/TR/SVG/paths.html#PathData" rel="nofollow">http://www.w3.org/TR/SVG/paths.html#PathData</a> and must be missing something.  I don't know how (in the path data, or maybe NOT in it) to identify what gets filled and what is part of a transparency mask or non-fill area.  Here's what I'm working with.</p>
  
  <pre><code>var busSvg = {
      // Bus body
      // 282 wide... 322 wide with the sides added
      top : 'c-4,-20,-18,-30,-38,-38 c-20,-8,-68,-18,-113,-19 c-35,1,-83,11,-113,19 c-20,8,-34,10,-38,38',
      left : ' l-20,150 v170',
      bottom : ' h26 v25 c0,30,45,30,45,0 v-25 h200 v25 c0,30,45,30,45,0 v-25 h26',
      right : ' v-170 l-20,-150z',
      // Marquee
      marquee : 'm-60,10 h-182 c-20,0,-20,-25,0,-25 h182 c20,0,20,25,0,25z',
      // Windshield
      windshield : 'm-220,150 c-11,0,-14,-8,-12,-16 l12,-85 c2,-10,5,-17,18,-17 h220 c13,0,17,7,18,17 l12,85, c1,8,-1,16,-12,16 h-235z',
      // Tires
      tire_left : 'm15,100 c0,30,45,30,45,0 c0,-30,-45,-30,-45,0',
      tire_right : 'm180,0 c0,30,45,30,45,0 c0,-30,-45,-30,-45,0',
  };
  
  var busIcon = {
      path: 'M0,-100 '+busSvg['top']+busSvg['left']+busSvg['bottom']+busSvg['right']+busSvg['marquee']+busSvg['windshield']+busSvg['tire_left']+busSvg['tire_right'],
      fillColor: "red",
      fillOpacity: 1,
      scale: .3, //.05,
      strokeColor: "black",
      strokeWeight: .5
  };
  </code></pre>