SVG CSS 悬停样式

Posted 2023-05-08

【中文标题】SVG CSS 悬停样式

【英文标题】：SVG CSS Hover Styling

【发布时间】：2017-04-03 07:54:17

【问题描述】：

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

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>

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

【参考方案1】：

试试这个 svg 代码：

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"   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>

【讨论】：

非常感谢！！使用其中一些，所以我对您使用的过程（假设这些更改是在 illustrator 中进行的）和/或最佳实践感兴趣

好吧，您的 SVG 中缺少完整的 5 SVG 路径。我刚刚得到了另一个包含所有路径的 SVG，包括正确的 5 个。然后我只是按照你的需要给它上色。您可以在 Illustrator 中保存和编辑它。

有道理，但你是如何让路径变得如此简洁的？当我跟踪和扩展 .jpg/.png 或仅使用预制 SVG 时，路径的代码似乎过长。

我在此链接中使用了一个已经制作好的 HTML5 SVG：webreflection.co.uk/img/html5.svg。你对那个 SVG 有问题吗？如果它不符合您的需要，也许我可以搜索另一个。