An SVG Mask for interactive mouse events on an area chart

area-chart-mask.html

<svg width="100%" height="100%">
  <defs>
    <mask
      id='mask-for-area-chart'
      maskUnits="userSpaceOnUse"
      maskContentUnits="userSpaceOnUse">
      <path d="M0Z" style="fill: white;">
      </path>
      </g>
    </mask>
  </defs>
  <rect
    mask='url(#mask-for-area-chart)'
    style="fill: steelblue;"
    width="100%"
    height="100%">
  </rect>
  <g>
    <rect
      mask='url(#mask-for-area-chart)'
      style="fill: green;"
      x="selectedItem.x"
      height="100%"
      width="barWidth">
    </rect>
  </g>
</svg>