基于CSS实现存在uh-notification-badge类时替换SVG路径

要在页面存在.uh-notification-badge类时替换SVG的路径，且无法修改HTML代码，可通过以下两种方式实现：

方案一：利用:has()选择器（现代浏览器优先） #

通过:has()选择器精准定位包含徽章元素的通知链接，直接覆盖SVG路径的d属性：

/* 当父链接包含uh-notification-badge时，修改SVG路径 */
#uh-notification-link:has(.uh-notification-badge) .uh-notification-icon path {
  d: path('m 16.2 11.9 l -0.1 -2.1 c 0 -3.5 -1.7 -6.5 -4.1 -7.7 V 0.6 c 0 -0.3 -0.3 -0.6 -0.6 -0.6 H 8.5 c -0.3 0 -0.6 0.3 -0.6 0.6 v 1.5 c -2.4 1.2 -4 4.3 -4 7.7 L 3.8 12 c -2.5 1 -3 3.5 -2.8 4.8 c 0 0.3 0.3 0.5 0.6 0.5 h 5.2 C 7 18.8 8.4 20 10 20 s 3 -1.2 3.3 -2.7 h 5.2 c 0.3 0 0.6 -0.2 0.6 -0.5 c 0.1 -1.3 -0.4 -3.8 -2.9 -4.9 M 10 18.8 c -1 0 -1.8 -0.6 -2 -1.5 h 4 c -0.2 0.9 -1 1.5 -2 1.5 z');
}

说明 #

• 选择器逻辑：#uh-notification-link:has(.uh-notification-badge)定位包含徽章的父链接，再通过后代选择器选中目标SVG路径
• 直接使用CSS标准的path()函数覆盖原路径值，实现路径替换
• 兼容性：需Chrome 105+、Firefox 121+、Safari 15.4+等现代浏览器支持

方案二：兼容旧版浏览器的备选方案 #

若需适配不支持:has()的旧版浏览器，可通过隐藏原路径、伪元素生成新SVG的方式实现：

/* 隐藏原SVG路径 */
#uh-notification-link .uh-notification-badge ~ .uh-notification-icon path {
  display: none;
}

/* 用伪元素生成包含新路径的SVG背景 */
#uh-notification-link .uh-notification-badge ~ .uh-notification-icon::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 20 20'%3E%3Cpath d='m 16.2 11.9 l -0.1 -2.1 c 0 -3.5 -1.7 -6.5 -4.1 -7.7 V 0.6 c 0 -0.3 -0.3 -0.6 -0.6 -0.6 H 8.5 c -0.3 0 -0.6 0.3 -0.6 0.6 v 1.5 c -2.4 1.2 -4 4.3 -4 7.7 L 3.8 12 c -2.5 1 -3 3.5 -2.8 4.8 c 0 0.3 0.3 0.5 0.6 0.5 h 5.2 C 7 18.8 8.4 20 10 20 s 3 -1.2 3.3 -2.7 h 5.2 c 0.3 0 0.6 -0.2 0.6 -0.5 c 0.1 -1.3 -0.4 -3.8 -2.9 -4.9 M 10 18.8 c -1 0 -1.8 -0.6 -2 -1.5 h 4 c -0.2 0.9 -1 1.5 -2 1.5 z' fill='rgb(77, 77, 77)'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* 确保SVG容器相对定位，让伪元素位置与原SVG重合 */
#uh-notification-link .uh-notification-icon {
  position: relative;
}

说明 #

• 通过相邻兄弟选择器~定位徽章后的SVG，隐藏原路径
• 将新路径封装为SVG数据URL，通过伪元素作为背景显示，实现视觉替换

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