So… you can set an SVG circle’s radius in CSS?
Published on January 24th, 2023 January 24th, 2023
The important bit is that I needed the --radius property in my CSS to stay in sync with the radius set in my SVG code. But having this value in two different places across two different files made me feel a little itchy. If someone changed the radius later, they’d need to change it in both places, and if they didn’t, it would subtly break the experience.
I knew that you could set some SVG properties in CSS (stroke, fill, stroke-width, and stroke-linecap to name a few.) This made me wonder if I could set the radius using the r property in CSS. So, I tried it out… and it seemed to work! Well, at least in Firefox.
With a bit of trepidation, I started testing in our other supported browsers. It worked in Chrome. It worked in Edge. It even worked in Safari! (And luckily I didn’t have to worry about Internet Explorer.)
