CSS动画class可正常触发父元素data-name选择器失效

API 探路者

2026-11-1

问题根源

你写的CSS选择器存在后代选择器语法误区，和属性选择器、SVG渲染逻辑没有关联。

核心逻辑说明

CSS选择器中的空格是后代匹配分隔符，代表“匹配前者内部的所有满足后者规则的后代元素”：

你注释掉的选择器g [data-name="action_arrow2"]，翻译过来的规则是：匹配所有位于g标签内部、且带有data-name="action_arrow2"属性的后代元素，永远不会命中g标签本身。
对照你的代码结构：
目标元素本身就是一个带data-name="action_arrow2"属性的g节点，它的内部没有任何带同名属性的子元素，因此这个选择器完全匹配不到目标，动画自然不会触发。
你当前生效的两个属性选择器g [data-name="clockwise"]、g [data-name="counterclockwise"]，恰好匹配到了外层g内部嵌套的、带对应属性的子g节点，所以这两个动画能正常运行，也让你产生了“data-name对父元素无效”的误解。

为什么class选择器能正常工作

你之前使用的.action_arrow2是无层级限制的类选择器，直接匹配所有带这个类名的元素，刚好命中了外层的目标g节点，因此动画可以正常触发。

修复方案

如果要直接匹配本身带data-name="action_arrow2"的g元素，去掉选择器中g和属性规则之间的空格，写成无间隔的并列选择器即可：

/* 匹配本身是g标签、且带有指定data-name属性的元素 */
g[data-name="action_arrow2"] {
  animation: 6s infinite;
  animation-name: arrow2_animation;
  transform-origin: 50% 50%;
}

如果不需要限定标签类型，也可以直接写[data-name="action_arrow2"]，匹配效果完全一致。