 I'll tell you what, Jake. Here's what we're going to talk about. And you'd be like slapping my leg and my arm and my face. I didn't slap my face. I had to bring some of my old slides back from the dead, as I talked about. Like, a 2016 talk gave that recently, because it was explicitly requested. And some of my slides were broken. Oh, no. I had a sort of a thing in SVG that span around. Like a spinner. Like a spinner. And it was a cog spinning around, but it was spinning around. And now it was just sort of going for a wonder around the page. So like the origin of the rotation had changed? Origin of the rotation had changed. Why did we break the web? Yes. Well, in my case, yes. Yes, we did. It turns out I didn't register enough on the statistics to worry about. But I was relying on technically a bug in Chrome. So you are to blame? I kind of. I don't know. I don't know if I knew I was relying on a bug in Chrome at the time. But it's still my ignorance. I suppose. Fine. Fine. It's my fault. Fine. OK. And so if you've got an HTML element and you spin it around with a transform origin of, well, I guess, the default, which is 50. 50-50. It kind of spins around the. We should be completely at a 50% so that in the middle. By default, the transform origin is in the middle of the border box. I think it's the painted area, maybe. Is that a thing that exists? As like. Yeah, no. Yes, no. I would say border box. Border box. OK. But I'm not sure. Treat it as if you know the answer. I have to go and look that up. And whereas in SVG, the default transform origin, I think, is 0, 0. But this is where it starts getting weird. The transform origin sort of differs from. So if you do, it's 0, 0, but not to the element. It's to the SVG element. Ooh. Oh, I think, yes, now you say that. That might be true. But if you did transform origin 50%, 50%, Chrome would put it in the middle of the painted element. The individual SVG, individual thing, not the SVG view box. So if you wanted the cog to spin around the center, transform origin 50%, 50%, rotate it. Do the thing you'd expect. OK. And everything works. What if I do transform origin 0, 0? Oh, that would be the top left of the SVG. Yeah, it was a bit weird. Like, percent behaved differently to 0%. I don't know. OK, I mean, it's apparently nowhere to be known anyway anymore. So it could be that my memory is off there, because I'd say that is in the past. Chrome fixed itself. Thanks, Chrome, to behave like Firefox was behaving, which was according to the spec, like the transform origin is always the SVG. Top left the SVG element, the parent SVG element. So that makes me reinforce the whole notion that SVG elements have this coordinate system that you work on. And every element works relative to that coordinate system. Yes. OK. Exactly that. And the fix is this relatively new CSS property called transform box. And that takes a bit of sweet. Interesting. Transform box. Here we go. I'm going to do the rest of the episode in Mickey Mouse voice. No, I'm not. And the values it has is border box, fill box, and view box. So the idea is, like, view box. This is a property on a SVG. It's a CSS, so it's on all elements, including an SVG element. What do you call the things inside an SVG element? Are they SVG elements? Well, we call a paragraph an HTML element. But how do we assume between a SVG, the boundary towards an SVG thing and the things that you can use inside SVG? Let's go for SVG root or HTML root. So we have SVG elements that are inside an SVG root. Yeah, let's do that. OK, OK, OK. Yeah, so the default for SVG is view box, which is essentially the parent view, SVG view, whereas the default for HTML is, well, I thought it was fill box, but now you've got me thinking. One of the two. It's either border box or fill box. I think that fill box is a thing. So you might very well be right. I didn't know that we ever had the notion of the region that is painted as something that you can work on. Yeah, but I am thinking it's border box now, because I think it might be the same as what's created by a bounding client wreck. Do we have fill box somewhere else? I think. So we do have it for, I think, pointer events, I think, pointer events in SVG. So basically, fill box could differ from the border box with, like, masks. Things escaping, outside, or things. So I think you're right, actually. I think HTML probably uses border box, because so pointer events in SVG, if you have a hover, you can have the hover be to the painted area. So if there's a hole in the middle. The pointer makes sense because you want to make it to the visual representation of the element, right? Well, sometimes you do, sometimes you don't. So this was a huge problem in Flash in the olden days. Yeah, it tails from my days as a Flash developer. A lot of people would make this mistake where they would have a button, and the thing they defined as a button, would be the button text. And that meant the hover area was the tent. Yeah, and if it was a really thin font, it was really difficult to get on. I remember those buggy Flash, where you had like. So with pointer events in SVG, you can define it as being the border box, like essentially the layout box or the painted area. So that's just a quick question. Would outline be part of the fill box? Ooh, probably not, because it's outside the border box. Oh, it'll be in the fill box. Yeah, so all that will be part of the fill box. Yeah. Interesting. I think, yeah, maybe, I think. I'm just going to give up. But yeah, so is this. So now you have control over how this works. Yes. So if you want to. But Chrome changed its default, which broke the thing. Yes, but now that supported, you know, transform box is supported in Safari, in Firefox, and in Chrome. Not Edge, unfortunately. Yeah. So if you want to spin around the center of something. So I used to always, my hack was to use transforms to get the thing back into 0, 0, do the rotation, and then do the reverse, which is a pain. Someone on Twitter came up with some much better way, the Fabian Gundel. Because you can have SVG in SVG. And it's on view box then. Yeah, so you can basically just do a relative coordinate system. So you do a relative coordinate system, rotate the thing inside, and then the extra transforms on the thing outside. Problem solved. There's all fixed. I like that. Yeah, I mean, that's probably not even that bad of a solution. It looks a bit icky in the markup, I guess. But it really solves the problem. Yeah, well, that's really solved. Some of them just don't get the hint. So I'm not a small talker. I hate it. Both in Uber or on the massage shop, I just go like, hmm. Yeah, get the hint. I don't want to talk to you. Oh, yeah, just drive. Most slave. Most of them do. Most of them are like, come on. Or barbershop. Also, very talker from like, hmm.