如何更改type="image"的SVG输入控件的填充颜色

嘿，我来帮你搞定这个问题～你现在用的是<input type="image">引用外部SVG，想改它的填充色对吧？因为外部SVG（尤其是跨域的，比如你用的维基媒体资源）没法直接用CSS控制fill属性，我给你几个可行的方案：

方案一：内联SVG（最精准可控） #

这是最靠谱的方法，把SVG代码直接嵌入到input的src里，就能随便改颜色了：

1. 先打开你引用的SVG链接，复制它的完整源代码。
2. 在代码里找到所有带fill的属性，把值改成你想要的颜色（比如fill="#2ecc71"改成绿色）。
3. 把修改后的SVG代码转成Data URI：
   • 可以用浏览器控制台快速转换：把SVG代码用单引号包起来，运行btoa('你的SVG代码')，得到的base64字符串就能直接用。
4. 把原来的src替换成转换后的Data URI就行。

举个修改后的代码例子：

<input name="ctl00$ctl00$cphM$cph$ImageButtonAnadirLote" 
       class="btnAfirmativo" 
       id="ctl00_ctl00_cphM_cph_ImageButtonAnadirLote" 
       style="border-width: 0px; cursor: pointer;" 
       onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$cphM$cph$ImageButtonAnadirLote", "", true, "", "", false, false))' 
       type="image" 
       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNNTAgMTBMMjAgNTBWOTBIMTBMMjAgNTBWMTBIMTBDNSAxMCA1IDIwIDEwIDI1TDUwIDUwTDkwIDI1Qzk1IDIwIDk1IDEwIDkwIDEwSDgwTDUwIDUwTDIwIDEwSDUwWiIgZmlsbD0iIzJlY2M3MSIvPjwvc3ZnPg==">

方案二：用CSS Filter间接变色（快速临时方案） #

如果不想折腾内联，你可以用CSS的filter属性调整颜色，适合原SVG是单色的情况：

.btnAfirmativo {
  /* 这里的参数可以自己调，比如hue-rotate是色相旋转，saturate是饱和度 */
  filter: hue-rotate(120deg) saturate(1.5);
}

⚠️ 注意：这个方法只能基于原SVG的颜色做偏移，没法精确设置特定颜色，适合快速调整的场景。

为什么直接用CSS fill不行？ #

因为<input type="image">加载的外部SVG是独立的文档，而且你用的是跨域资源（维基媒体的链接），浏览器的同源策略会阻止你的页面CSS访问外部SVG的DOM元素，所以直接写.btnAfirmativo { fill: red; }是无效的哦～

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