[CSS] SVG 색깔 바꾸기

React에서 SVG에 마우스오버(hover)되면 색깔이 바뀌게 하고 싶었으나 구현이 잘 되지 않았다.

설명에 앞서 SVG란 단순히 jpg, png와 같은 이미지라고 생각했는데

Scalable Vector Graphics : 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다.

사전적 정의를 살펴보니 HTML, CSS, JS와 함께 동작하는 XML마크업 언어였다.

 

내가 이용할 SVG파일도 vscode에서 열어보니 코드 형태로 되어있었다.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g>
	<path fill="#E83828" d="M960.692,305.367c-25.187-59.546-61.233-113.015-107.138-158.92
		c-45.906-45.906-99.375-81.954-158.921-107.139C632.968,13.225,567.482,0,500,0c-67.484,0-132.968,13.225-194.635,39.308
		..."/>
</g>
</svg>

 

다시 본론으로 돌아와서 svg파일을 React에서 사용하기 위해 아래와 같이 ReactComponent 형태로 import하였다.

import { Link } from "react-router-dom";
import { ReactComponent as Stamp } from "../asset/SVGname.svg";
import styles from "./Home.module.css";

function Home() {
  return (
    <main className={styles.container}>
      ...
      <Link to="/about">
        <Stamp className={styles.stamp} />
      </Link>
    </main>
  );
}
export default Home;

 

svg 파일에서 컬러를 변경하는 방법은 fill 속성을 조작하면 된다.

그래서 첫번째 시도한 방법은 아래와 같다. (아래의 코드는 작동하지 않는 실패한 코드)

.stamp {
  fill: #000;
}
.stamp:hover {
  opacity: 1;
  fill: #e83828;
}

 

구현이 되지 않았던 이유는 SVG파일도 코드 형태로 되어있다는 점에서 다시 열어봤을 때 이해가 되었다.

fill속성이 svg안에 어디에 있나 살펴봤더니 svg > g > path에 있었다.

그래서 아래와 같이 두번째 시도로 해결할 수 있었다.

.stamp > g > path {
  fill: #000;
}
.stamp:hover > g > path {
  fill: #e83828;
}

 

구글링했을 때는 첫번째 방법으로 해결이 되는데 왜 나는 안되는거지 고민이었는데 내가 가진 svg 파일의 속성이 달랐기 때문에 이런 차이가 있었고, 혹시 다른 사람들이 이 문제에 직면했을 때 내 글을 본다면 본인이 가진 svg파일을 살펴보면 답이 있을 것이라고 말씀드리고 싶다!