Why Does Chrome Read The Svg Circle Radius from The Style Attribute

Why does Chrome read the svg circle radius from the style attribute?

The current published version of the SVG specification is 1.1 it states that the radius of a circle is an attribute and not a CSS property. That's what IE implements.

There is a new version of the SVG specification being worked on, version 2. In it, the radius of a circle (along with many other things that are currently attributes) would be CSS properties. That's what Chrome implements.

Chrome is experimenting with implementing parts of the SVG 2 specification as is Firefox. Different UAs have implemented different parts of the SVG 2 specification as they investigate SVG 2 prior to its completion to prove that it's feasible to implement it.

SVG circle element radius attribute r does not transition in Firefox but does just fine in Chrome

In SVG 1.1, which is the current standard, only certain attributes can by styled with CSS. The list of those properties can be found here:

SVG 1.1 property index

Note that r is not in this list.

In the upcoming SVG2 standard, most attributes will be stylable. But browsers have only just started to implement SVG2 features. Right now you can modify and transition r in Chrome, but not yet in other browsers.

You will need to use another technique to animate r. Either using SVG SMIL animation, or use one of the various SVG JS libraries that have animation functions.

SVG radius or position with CSS variables

According to the MDN Docs "Starting with SVG2, r is a Geometry Property meaning this attribute can also be used as a CSS property for circles."

There are three ways to set the radius value

as attribute

<circle ... r=10>

via class and stylesheet

circle {
  r: 10px;
}

inline in 'style' attribute

  <circle... style="r: 10px;" ></circle>

The last way has the greates presedence. Take a look at this example where all circle elements have r set as attribute, which is overridden by the stylesheet (2nd circle), which is overridden again by the inline style attribute (3rd circle)

(These three ways don't have to be used together, but are only combined to demontrate which one has a higher presedence and overwrites the already set values)

:root {
  --dark-text-clr: purple;
  --radius: 20px;
}

.circle {
  r: 10px;
}

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" viewBox="0 0 300 300">
<circle cx="10" cy="10" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r=5></circle>
<circle cx="30" cy="30" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r=5 class="circle"></circle>
  <circle cx="60" cy="60" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r=5 class="circle" style="r: var(--radius);" ></circle>
</svg>

Style SVG circle with CSS

As per the SVG 1.1 specification you can't style the r attribute of an SVG circle using CSS https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties. But you can do:

<circle cx="168" cy="179" r="59"
        fill="white" stroke="black"
        onmouseover="evt.target.setAttribute('r', '72');"
        onmouseout="evt.target.setAttribute('r', '59');"/>

In SVG 2, which is partially supported by some modern browsers, you can style the r attribute of circles using CSS. https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

Resizing SVG Circle Radius Using CSS Animation

In SVG 1.1 the radius of a circle was an attribute and not a CSS property. SVG 2 changes this and instead makes the circle's radius a CSS property that's mapped to an attribute.

CSS animations animate CSS properties and do not animate attributes.

Firefox has now implemented this part of the SVG 2 specification so the testcase in the question will work now although it didn't when the question was written.

SMIL animations will work on attributes (and CSS properties).

<html>
    <head>
        <link href = "styling.css" rel = "stylesheet" type = "text/css"></link>
    </head>
    <body>
        <svg class = "button" expanded = "true" height = "100px" width = "100px">
            <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/>
            <circle class = "innerCircle" cx = "50%" cy = "50%" r = "25%" fill = "#000000">
              <animate attributeName="r" begin="0s" dur="1s" repeatCount="indefinite" from="5%" to="25%"/>
            </circle>
        </svg>
    </body>
</html>

Prevent border-radius from clipping SVG icon in CSS

It's the containing icon element that you want to be circular and with that background color, and possibly with some padding.

There are various ways of positioning the svg. This snippet uses flex to center it in the icon element. It uses 50% as the border radius of the icon element to ensure a circle (whatever size and padding you decide to have on the icon element).

.tik-tok-icon {
  fill: hsla(0, 0%, 50%, 1);
  width: 80%;
}

.icon {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsla(0, 0%, 20%, 1);
  padding: 10px;
}

<html>

<body>
  <div class="icon">
    <svg class="tik-tok-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fab" data-icon="tiktok" class="1 _icon_1ijny5" viewBox="0 0 448 512"><path d="M448 209.91a210.06 210.06 0 01-122.77-39.25v178.72A162.55 162.55 0 11185 188.31v89.89a74.62 74.62 0 1052.23 71.18V0h88a121.18 121.18 0 001.86 22.17A122.18 122.18 0 00381 102.39a121.43 121.43 0 0067 20.14z"></path></svg>
  </div>

</body>

</html>

Why Does Chrome Read The Svg Circle Radius from The Style Attribute