设置输入元素的 SVG 填充颜色答案

【问题标题】：Styling SVG Fill Color of an input element设置输入元素的 SVG 填充颜色
【发布时间】：2012-07-16 06:44:34
【问题描述】：

当下面的输入元素处于：悬停状态不改变源svg图像时，是否可以改变SVG内容的填充颜色？

<input type="image" src="images/toolbar/check.svg" />

最终奏效的解决方案是基于 Erik 的建议：

首先需要将输入元素更改为带有内联svg内容的按钮元素：

<button type="button">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"     version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 95.453 100" enable-background="new 0 0 95.453 100" xml:space="preserve"><g><g><polygon points="94.587,27.48 31.657,86.15 31.217,85.68 18.847,72.41 0.566,52.81 14.106,40.19 32.387,59.79 81.776,13.74"/></g></g>
</svg>
</button>

然后我们可以使用普通的 CSS 设置 svg 填充颜色的样式：

button:hover svg {
    fill: red;
}

【问题讨论】：

标签： css svg

【解决方案1】：

为什么不为此使用内联 svg，然后添加一些 CSS 来设置填充颜色的样式。那应该更有效率。

【讨论】：