svg hover 시 색상 바꾸는 방법

html 파일에 svg 태그 내용을 직접 입력한다

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
   <path id="facebook" fill="#ffffff" d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
	c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
  </svg>

a svg:hover #facebook{ 
  fill: #111;
}

이런 식으로 svg 태그 안에 있는 path에 class나 id를 줘서 그걸 선택자로 이용하면 색상을 바꿀 수 있다!

참고 사이트: https://codepen.io/luiscarvalho/pen/bGwzOR