SVG attributes beaten by CSS&style in priority?

A long read from the standard: https://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes

The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or ‘style’ attributes.

Hopefully this isn't too late, but this helped me actually understand the issue:

Attributes on SVG elements are at the lowest level of priority, as mentioned in the attribute spec: https://www.w3.org/TR/SVG/styling.html#PresentationAttributes

This means if you want a particular attribute on a specific element, add it to the style="[...]" attribute for the element such that it has the highest specificity and therefore the highest priority.

For example, if you want to override stroke as in the original example, use style="stroke: red;" instead of stroke="red". If you're using a library such as D3, make sure you're using .style() instead of .attr() to set high-priority styles.

Hope that helps others.