SVG: why does external css override inline style for text?

Question

Because in SVG, like HTML before it, styles trump attribute styling.

fill="red" below is NOT an “inline style”, style="fill:green" IS an inline style.

<svg width="400" height="400">
  <text x="50" y="50" fill="red" style="fill:green">This will be green</text>
</svg>

Like wise, if you have a style defined outside, it will win.

<style>
  text { fill: lime; }
</style>

<svg width="300" height="300">
  <text x="50" y="40" fill="red">This will be lime</text>
</svg>