css एसवीजी सीएसएस हॉवर स्टाइलिंग



svg hover (1)

सीएसएस का उपयोग करके इस बहु-रंग की एचटीएमएल छवि के एसवीजी को स्टाइल करने की कोशिश कर रहा है ताकि 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>

अगर आप इलस्ट्रेटर में मूल एसवीजी ( https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.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" 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>





adobe-illustrator