设置输入元素的SVG填充颜色样式 [英] Styling SVG Fill Color of an input element
本文介绍了设置输入元素的SVG填充颜色样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当以下输入元素处于:hover状态时无需更改源SVG图像,是否可以更改SVG内容的填充颜色?
Is it possible to change the Fill Color of the SVG content when the input element below is in :hover state without changing the source svg image?
<input type="image" src="images/toolbar/check.svg" />
最终有效的解决方案基于Erik的建议:
The solution that ultimately worked is based on Erik's suggestion:
首先,需要将输入元素更改为具有内嵌svg内容的按钮元素:
First the input element needs to be changed into a button element with inline svg content:
<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填充颜色的样式:
Then we can style the svg fill color using ordinary CSS:
button:hover svg {
fill: red;
}
推荐答案
为什么不为此使用内联svg,然后添加一些CSS来设置填充颜色的样式.那应该更有效率.
Why not use inline svg for this instead, and then add some CSS to style the fill colors. That should be more efficient.
这篇关于设置输入元素的SVG填充颜色样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文