css 的 `content: url()` 无法对 svg 图像应用 `filter` 等样式，因其加载为替换元素（replaced content），不继承父级样式；正确方式是将 svg 内联到 html 中，再直接为其添加 css 滤镜。
在 Web 开发中，常希望通过 CSS 快速调整 SVG 图标的颜色或视觉效果（如反色、饱和度、亮度等）。但需注意：当使用 content: url(...) 引入外部 SVG 文件时，该 SVG 会被当作一个不可见的“图像”（类似 标签），此时它是一个替换元素（replaced element），CSS 滤镜（filter）、填充色（fill）或描边色（stroke）等样式均无法穿透作用于其内部路径——即使你为伪元素设置了 filter，实际生效对象是整个伪元素容器，而非 SVG 内容本身。
✅ 正确做法：内联 SVG（inline SVG）
将 SVG 代码直接嵌入 HTML（而非通过 url() 引用），使其成为 DOM 的一部分，这样 CSS 才能精准控制其内部结构与样式：
.list-dots-menu-right {
/* ✅ 滤镜可直接生效 */
filter: invert(0%) sepia(0%) saturate(21%) hue-rotate(38deg) brightness(60%) contrast(105%);
/* ✅ 还可进一步控制子元素（如统一 fill 颜色） */
fill: currentColor; /* 让图标随文本色自动变化 */
}
/* 可选：响应式尺寸控制 */
.list-dots-menu-right {
width: 1.5em;
height: 1.5em;
vertical-align: middle;
}⚠️ 注意事项：
- 若 SVG 文件较大，建议使用构建工具（如 Webpack 的 svg-inline-loader 或 Vite 的 vite-plugin-svg-icons）自动化内联；
- 外部 SVG 通过
或 background-image 引入时，同样无法应用 fill / filter（除非使用 CSS mask 或 clip-path 等高级技巧，但限制多且兼容性差）；
- 内联 SVG 后，还可利用 currentColor 实现主题色联动，提升可维护性；
- 滤镜顺序会影响最终效果（如 hue-rotate 在 saturate 后执行），调试时建议逐步简化参数。
总结：要真正“操控 SVG 的视觉表现”，必须让其成为可样式化的 DOM 节点——内联是前提，filter、fill、stroke 等属性才是关键武器。
