SVG CSS悬停样式 [英] SVG CSS Hover Styling

问题描述

尝试使用CSS对这种多色HTML图像的SVG进行风格化，以使悬停时5的右侧为白色。

body {background-color：grey;} svg {height：50vh; 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.1id =Layer_1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkx = 0pxy =0pxviewbox = - 561 1804 379 407style =enable-background：new -561 1804 379 407; xml：space =preserveclass =html5> < g取代; < path class =st0d =M-427.3,1975.7h55.3v-42.9h-59.2L-427.3,1975.7z M-539.3,1821l30.5,341.7l136.8,381136.9-37.9l30.5- 341.8 C-204.7,1821-539.3,1821-539.3,1821z M-261.3,2141-110.7,30.7v-43.5l-0.1,01 -85.9-23.8l-6-67.3h42.113.1,34.914.7.7 ，12.6l0.1,0v-67h-93.7l-11.3-126.7h105v-41.9h136.8L-261.3,2141z/> < path class =st1d =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.7l-85.9,23.8v43.5l110.7-30.7l26.1-292.1L-372,1848.9L-372,1848.9z/> < g class =st2> < polygon class =st0points = - 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 =st0points = - 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取代; < / svg>

如果您打开原始svg（ https://www.w3.org/html/logo/下载/ HTML5_1Color_Black.svg ），并抓住SVG代码，你会发现没有路径/类来操纵它。不知道是否问题可以在CSS中解决，或者需要在Illustrator中完成，但任何想法或帮助将不胜感激。

解决方案

试试这个svg代码：

body {background-color：grey;} svg {height：50vh; 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 =html5xmlns = http://www.w3.org/2000/svgwidth =512height =512viewBox =0 0 512 512> < title> HTML5徽标徽章< / title> < path class =bodyd =M71,460 L30,0 481,0 440,460 255,512/> < path class =right-filld =M256,472 L405,431 440,37 256,37/> < path class =left-5d =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-5d =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>

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.

解决方案

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>

这篇关于SVG CSS悬停样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！