请教SVG中该CSS多类组合样式结构的专业名称

AI 小北

2026-8-14

SVG中defs内CSS类写法解析

你看到的这种写法不是SVG特有的特殊语法，只是图形编辑器为了压缩文件体积，把CSS分组选择器的空格、换行全部删掉了，看起来像是类之间互相引用，本质就是普通的CSS层叠规则。

先把压缩的CSS格式化还原：

.cls-1 {
  stroke-width: 2.8px;
}
.cls-1, .cls-2, .cls-3 {
  fill: none;
  stroke: #FFF;
}
.cls-1, .cls-3 {
  stroke-miterlimit: 10;
}
.cls-2 {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cls-2, .cls-3 {
  stroke-width: 2.5px;
}

关于你问的三个概念：

这属于cascading（层叠）：同一个元素的多个样式规则会按照优先级叠加生效。比如.cls-1的stroke-width先被设为2.8px，后续没有其他规则覆盖这个属性，所以最终生效；.cls-2的stroke-width则取后面分组规则里的2.5px。
和inheritance（继承）无关：继承是元素从父元素继承样式，这里的样式都是直接给类定义的，没有继承逻辑。
和shadow-tree（影子树）无关：影子树是Web Components的特性，SVG的<defs>只是存放可复用元素的容器，和这种CSS写法完全不相关。