SVG CSS Hover Styling

问题

Trying to stylize a SVG of this multi-color HTML image using CSS so that the right side of the 5 is white on hover.

body {
  background-color: gray;
}
svg {
  height: 50vh;
  fill: white;
}
.html5 g.st2 .st0 {
  fill: transparent;
}
.html5:hover path.st0 {
  fill: #e44d26;
}
.html5:hover path.st1 {
  fill: #f16529;
}
.html5:hover g.st2 .st0 {
  fill: white;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="-561 1804 379 407" style="enable-background:new -561 1804 379 407;" xml:space="preserve" class="html5">
  <g>
    <path class="st0" d="M-427.3,1975.7h55.3v-42.9h-59.2L-427.3,1975.7z M-539.3,1821l30.5,341.7l136.8,38l136.9-37.9l30.5-341.8
		C-204.7,1821-539.3,1821-539.3,1821z M-261.3,2141l-110.7,30.7v-43.5l-0.1,0l-85.9-23.8l-6-67.3h42.1l3.1,34.9l46.7,12.6l0.1,0v-67
		h-93.7l-11.3-126.7h105v-41.9h136.8L-261.3,2141z" />
    <path class="st1" d="M-320.4,2017.6H-372v67l46.7-12.6L-320.4,2017.6z M-372,1848.9v41.9h105l-3.8,41.9H-372v42.9h97.4l-11.5,128.7
		l-85.9,23.8v43.5l110.7-30.7l26.1-292.1L-372,1848.9L-372,1848.9z" />
    <g class="st2">
      <polygon class="st0" points="-372,1890.8 -477,1890.8 -465.7,2017.6 -372,2017.6 -372,1975.7 -427.3,1975.7 -431.2,1932.8 
			-372,1932.8 		" />
      <polygon class="st0" points="-372,2084.6 -372.1,2084.6 -418.7,2072 -421.9,2037.1 -463.9,2037.1 -457.9,2104.4 -372.1,2128.2 
			-372,2128.2 		" />
    </g>
  </g>
</svg>

If you open the original svg (https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.svg) in Illustrator and grab the SVG code you'll notice there's no path/class to manipulate it with. Not sure if the problem can be addressed in CSS or needs to be done in illustrator but any ideas or help would be appreciated.

回答1:

Try this svg code:

body {
  background-color: gray;
}
svg {
  height: 50vh;
  fill: white;
}

.html5:hover .body,
.html5 .right-fill {
	fill: #FFF;
}

.html5 .left-5,
.html5 .right-5 {
	fill: grey;
}

.html5:hover .body {
	fill: #E34F26;
}

.html5:hover .right-fill {
	fill: #EF652A;
}

.html5:hover .left-5 {
	fill: #EBEBEB;
}

.html5:hover .right-5 {
	fill: #FFF;
}

<svg class="html5" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
  <title>HTML5 Logo Badge</title>
  <path class="body" d="M71,460 L30,0 481,0 440,460 255,512"/>
  <path class="right-fill" d="M256,472 L405,431 440,37 256,37"/>
  <path class="left-5" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/>
  <path class="right-5" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>
</svg>

来源：https://stackoverflow.com/questions/40694441/svg-css-hover-styling