SVG CSS 悬停样式

2022-01-22 00:00:00 styling hover svg css adobe-illustrator

尝试使用 CSS 对该多色 HTML 图像的 SVG 进行样式化，以使 5 的右侧在悬停时为白色.

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>

如果您打开原始 svg (https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.svg) 在 Illustrator 中获取 SVG 代码，您会注意到没有路径/类可以用来操作它.不确定问题是否可以在 CSS 中解决或需要在 Illustrator 中完成，但任何想法或帮助将不胜感激.

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.

推荐答案

试试这个 svg 代码:

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>

相关文章