html - HTML - 更改SVG图标的颜色

我在尝试在悬停时更改SVG图标的颜色,SVG图标由不同的形状组成,如圆形,矩形,多边形,路径,等等。

以下是SVG的HTML:


 <rect x="0.1" y="0" display="none" fill="#FFFFFF" width="63.9" height="54"></rect>


 <g>


 <g>


 <polygon fill="#010101" points="37,21.6 30.2,28.5 26.8,25 24.9,26.9 30.4,32.4 39.2,23.8"></polygon>


 </g>


 </g>


 <g>


 <g>


 <path fill="#010101" d="M32,13c-7.7,0-14,6.3-14,14c0,7.7,6.3,14,14,14s14-6.3,14-14C46,19.3,39.8,13,32,13z M32,38.5


 c-6.3,0-11.5-5.1-11.5-11.5c0-6.3,5.1-11.5,11.5-11.5c6.3,0,11.5,5.1,11.5,11.5C43.5,33.3,38.4,38.5,32,38.5z"></path>


 </g>


 </g>


 </svg>```



This is the first svg. Please suggest some way to change its colour to #ff721f on hover.



时间:

更好的方法是稍微修改SVG结构,将SVG形状包装在一个g元素中,属性为fill="currentColor",并从单个元素中移除fill属性,这样,你可以使用CSS /属性定义更改SVG的颜色:


.flag-icon1 { color: #010101; }



.flag-icon1:hover { color: #ff721f; }

<svg version="1.1" id="Layer_1" class="icon flag-icon1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">


 <g fill="currentColor">


 <polygon points="37,21.6 30.2,28.5 26.8,25 24.9,26.9 30.4,32.4 39.2,23.8" />


 <path d="M32,13c-7.7,0-14,6.3-14,14c0,7.7,6.3,14,14,14s14-6.3,14-14C46,19.3,39.8,13,32,13z M32,38.5 c-6.3,0-11.5-5.1-11.5-11.5c0-6.3,5.1-11.5,11.5-11.5c6.3,0,11.5,5.1,11.5,11.5C43.5,33.3,38.4,38.5,32,38.5z" />


 </g>


</svg>

或者,可以使用fill属性覆盖悬停状态的颜色:


.flag-icon1:hover * {


 fill: #ff721f;


}

<svg version="1.1" id="Layer_1" class="icon flag-icon1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">


 <g>


 <polygon fill="#010101" points="37,21.6 30.2,28.5 26.8,25 24.9,26.9 30.4,32.4 39.2,23.8" />


 </g>


 <g>


 <path fill="#010101" d="M32,13c-7.7,0-14,6.3-14,14c0,7.7,6.3,14,14,14s14-6.3,14-14C46,19.3,39.8,13,32,13z M32,38.5 c-6.3,0-11.5-5.1-11.5-11.5c0-6.3,5.1-11.5,11.5-11.5c6.3,0,11.5,5.1,11.5,11.5C43.5,33.3,38.4,38.5,32,38.5z" />


 </g>


</svg>

...