SVG Title vs. HTML Title Attribute

You know the title attribute? I can do this:

And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get…

Which, uh, I guess is something. I sometimes use it for things like putting an expanded date or time on an element that uses shorthand for it. It’s a tiny bit of UX helpfulness reserved exclusively for sighted mouse users.
But it’s not particularly useful, as I understand it. Ire Aderinokun dug into how it’s used for the element (a commonly cited example) and found that it’s not-so-great alone. She suggests a JavaScript-enhanced pattern. She also mentions that JAWS has a setting for announcing titles in there, so that’s interesting (although it sounds like it’s off by default).
I honestly just don’t know how useful title is for screen readers, but it’s certainly going to be nuanced.
I did just learn something about titles though… this doesn’t work:


If you hover over that element, you won’t get a title display. You have to do it like this:


Which, interestingly, Firefox 79 just started supporting.
When you use title like that, the hoverable area to reveal the title popup is the entire rectangle of the
I was looking at all this because I got an interesting email from someone who was in a situation where the title popup only seemed to come up when hovering over the “filled in” pixels of an SVG, and not where transparent pixels were. Weird, I thought. I couldn’t replicate in my testing either.
Turns out there is a situation like this. You can apply a