title: Need an SVG workaround
body: <p>I'm recreating blueprints as SVGs, as can be seen in this <a href="https://codepen.io/tOkyO1/pen/OWrxMO" rel="nofollow noreferrer">Pen</a>. I'm obviously not finished, so the code is a bit sloppy right now since I've been experimenting with different workarounds in vain.</p>
  
  <p>One of the effects I have implemented is rooms will <code>fill</code> with an <code>opacity: 0.5</code> if hovered.</p>
  
  <p>Initially the doors consisted of only two elements (a <code>path</code> or line that rotates, and a <code>path</code> whose <code>stroke-dashoffset</code> is animated) to achieve the effect of the doors shutting and then opening, so, if a room has doors that protrude outwards and is hovered, there will be "empty" space within that (or those) door frame(s).</p>
  
  <p>Therefore, in order to <code>fill</code> the empty space within the door "frames" I simply created a closed path, overlaid it on top of the initial two elements, got rid of its <code>stroke</code>, and gave it a <code>fill</code>. The issue with this workaround, though, is that if you rotate the door's <code>fill</code>, which is also set to an <code>opacity: 0.5</code>, in tandem with the closing door, when the door is completely closed that part of the room's <code>fill</code> of course becomes a darker colour (i.e. <code>opacity: 0.5</code> + <code>opacity: 0.5</code>).</p>
  
  <p>So my next idea was to create a "mask" element. The "mask" element is another quarter-circle (BLUE in the codepen), which mirrors the area of the door "frame", and also rotates in tandem with the door to eventually obscure the door "frame's" fill. If the doors of some rooms weren't so close to other walls, this would be an adequate solution, yet I've designed the SVG so that it will appear perfectly crisp at a <code>scale(1)</code> for mobile.</p>
  
  <p>The next workaround I devised was similar to the last, but instead of using a mirrored quarter-circle I tried using a <code>rect</code>angle (GREEN in the codepen), which I would rotate while increasing and then decreasing the width. The issue I've run into with this workaround is that, for whatever reason, the <code>rect</code>angle seemingly increases its <code>width</code> outwards in both directions from its center, and also <code>transition</code>s its <code>x</code> position despite its <code>transform-origin</code> being set to <code>100% 100%</code>. Notably, I have played around quite a bit with the values, and have gotten it to work almost adequately, so that it obscures most of the quarter-circle door "frame"; nonetheless, I'm fairly certain that I would have to continually adjust these values any time the blueprint is <code>scale</code>d, and there didn't seem to be any rhyme or reason to the particular values that "worked".</p>
  
  <p>Another idea I had was to decrease the size of doors, but I'm afraid that by doing so the doors will become borderline illegible at <code>scale(1)</code>.</p>
  
  <p><strong>Has anybody ever run into this issue before?</strong></p>
  
  <p><strong>Is anybody aware of any workarounds?</strong></p>