在前端开发中，svg 因为可以直接嵌入到 HTML 代码里面，与HTML/CSS 融合，通过 CSS 控制样式（如颜色、透明度），所有现代浏览器均原生支持 SVG，移动端和桌面端显示一致，并且 SEO 友好等好处而被广泛使用。
但最近在一些产品开发的过程中，发现了一个诡异的问题：部分 svg 图标无法通过 CSS 控制填充色及前景色，也就是说完全无法控制 svg 的任何颜色，但相同一个 html 中有些 svg 是可以正常控制的。在网上也没有找到相关的解决方法，问了 DeepSeek、ChatGPT、Gemni 等 AI 都没有找到解决方法，这些 AI 几乎都是千篇一律地让我使用 CSS 去控制。
因为 svg 这个东西平时都是拿过来就用，用得也不多，所以没有仔细研究过它，一时间陷入了僵局：如果整个 html 页面的 svg 都不生效那肯定是我代码有问题，但只是少数一两个不行可能就是 svg 的问题。
顺着这个思路换掉不生效的 svg ，居然真的可以。虽然问题解决了，但心里总有点不爽。于是就抽空细致地对比了每个操作步骤，终于让我找到了原因，找到了原因之后再找解决方法就容易了。
以下面的 svg 为例：
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="17.5" viewBox="0 0 448 512"><title>Spiderbuf 爬虫练习网站</title><path d="M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l140.1 0L400 115.9 400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-32-48 0 0 32c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l32 0 0-48-32 0z"/></svg>
有时候为了控制 svg 大小修改了 svg 代码中的 viewBox 的数字，修改后的 svg 就会出现无法使用 CSS 控制 svg 背景色跟前景色的问题。解决方法也简单，就是不要修改 viewBox 中的内容即可，除非你有能力修改整个 svg 代码。
我们一般是在网上找的 svg 代码，尺寸大小需要根据我们 html 页面的样式风格进行调整，但不要去修改 viewBox 中的内容，svg 控制大小可以通过 width 跟 height 来控制（如以上 svg 代码中的 width 跟 height）。
没有去深究为什么修改了 viewBox 中的数字，svg 还能正常显示形状但就是无法修改颜色的具体原因，但知道了修改 viewBox 会导致 svg 无法使用 CSS 控制颜色这个情况就可以了。