为什么jQuery的attr修改SVG的r、cx等属性有效，修改stroke却无效？

问题原因 #

这个现象由两个核心规则共同导致：

1. SVG属性的分类与优先级差异
   SVG属性分为两类，渲染逻辑完全不同：

• 几何/结构属性：比如r、cx、cy、viewBox、路径的d属性等，这类是SVG元素独有的固有属性，没有对应的CSS控制项，修改标签属性就能直接触发渲染更新，所以jQuery的attr()方法可以正常修改这类属性。
• 展示属性（presentation attributes）：比如stroke、fill、stroke-width、opacity等，这类属性同时支持两种定义方式：既可以作为XML属性写在SVG标签上，也可以作为CSS样式控制。浏览器渲染时会优先采用CSS样式（包括外部样式、内联样式）的规则，标签上的展示属性优先级最低，所以即使你通过attr()修改了标签上的stroke值，也会被更高优先级的样式规则覆盖，看不到修改效果。而attr()读取的是标签上的属性值，和渲染优先级无关，所以可以正常返回结果。

2. 旧版本jQuery的SVG兼容缺陷
   jQuery 3.0之前的版本主要针对HTML DOM做适配，未对SVG的XML命名空间属性做完整兼容，修改部分展示属性时，即使不存在样式覆盖，也可能出现修改了标签属性但未触发浏览器渲染更新的问题。

通用判断规律 #

你可以按照以下规则判断是否可以用jQuery的attr()修改SVG属性：

• 不存在对应CSS属性的SVG独有几何/结构属性：可以用attr()正常修改。
• 和CSS属性同名的展示类属性：不要用attr()修改，改用css()方法即可，逻辑和修改普通HTML元素样式一致：

$('.circle').css('stroke', 'white'); // 可正常生效

你用到的原生DOM修改style属性的方案，本质和jQuery的css()方法逻辑一致，都是修改内联样式，优先级高于标签属性，所以可以正常生效。

内容的提问来源于stack exchange，提问作者AGamePlayer