SVG mask doesn't work if a media query is present

Question

TL;DR: I need to mask out a portion of one rectangle in SVG, based on the size and position of another existing rectangle, which will be changing dynamically. A Chrome bug is blocking the mask + use approach I tried. How can I do a mask or inverted clip path based on an existing shape?

Full Overview: I'm using D3.js, and I am using the brush control to add a brush to a rectangle in an embedded SVG. By default, this adds some extra elements to the SVG, including a rect with class extent that shows the size of the brushed area.

Rather than have the brush extent be rendered as a semi-transparent overlay on top of the rectangle, as in most D3 examples, I am trying to "cut out" the extent from a semi-transparent overlay, so that the brush area shows the true color below. Per this question, I am trying to do this with a mask element, with a child use element referencing the extent. With some D3 magic, I now have a structure like this:

<svg width="100" height="100">
  <g class="brush-layer inverted">
    <defs>
      <mask id="mask835">
        <rect fill="#fff" width="100%" height="100%"></rect>
        <use fill="#000" xlink:href="#extent848"></use>
      </mask>
    </defs>
    <g class="brush" style="pointer-events: none;">
      <rect class="overlay" mask="url(#mask835)" width="100%" height="17"></rect>
      <rect class="extent" x="30" width="52" height="17" id="extent848"></rect>
    </g>
  </g>
</svg>

This works great... sort of. It turns out that there appears to be a tricky Chrome bug, which I've filed here, which prevents the mask from being applied if there's a @media query in the CSS. You can see the working version here and the failing version here (fails in Chrome, works in FF).

I need this to work in Chrome, and can't drop the @media query. I also need to make the use element work, because D3 will automatically resize the extent rectangle, and that's the shape I need to mask out.

So, how can I mask out a portion of one rect, based on another rect, without using the mask + use strategy above?

Answer 1

One possible workaround might be to use a custom clip-path, but it's probably not going to be as elegant. Some examples of how to do do this with clip-path can be found in this question.