svg fill을 javascript로 변경하기

프로젝트에 아이콘 이미지를 png로 사용 중이었는데, 상태가 normal과 hover 2가지이다. 그렇다보니 모든 아이콘 이미지가 2개씩 있다. 그냥 뭐 그대로 해도 되는데.. 이번에 내가 맡은 부분에서는 svg 파일 하나로 컨트롤을 해보고 싶었다.

 

svg 파일을 이미지로 사용하면 마우스 오버 했을 때, fill을 변경 할 수가 없어서 자바스크립트로 했다.

css background image로 해도 마찬가지로 fill을 변경 할 수 없었다.

 

// pu_btn 마우스 오버 
	function handleHover(button) {
		const svgPath = button.getAttribute("data-svg-path");
		const svgDiv = button.querySelector("div"); 
		const originalHTML = button.innerHTML; // 초기 HTML 내용 저장\

		// 버튼에 마우스 호버 이벤트 리스너 추가
		button.addEventListener("mouseenter", () => {
			// SVG 파일 로드
			fetch(svgPath)
				.then(response => response.text())
				.then(svgData => {
					// SVG 데이터를 div에 HTML로 주입
					svgDiv.innerHTML = svgData;
					// SVG 내의 모든 path 요소의 fill, stroke 속성 변경
					const paths = button.querySelectorAll("path");
					paths.forEach(path => {
						path.setAttribute("fill", "#2FEBFF");
						path.setAttribute("stroke", "#2FEBFF");
					});
				})
				.catch(error => {
					console.error("SVG 파일을 로드하는 중 오류 발생:", error);
				});
			
		});
		// 버튼에서 마우스 호버 이벤트 리스너 제거
		button.addEventListener("mouseleave", () => {
			 // 원래의 HTML 내용으로 되돌림
			button.innerHTML = originalHTML;
			const paths = button.querySelectorAll("path");
			paths.forEach(path => {
			path.setAttribute("fill", "#ffffff");
			path.setAttribute("stroke", "#ffffff");
			});
		});
	}
	const crsrdButton = document.querySelector(".crsrd");
	const unxpButton = document.querySelector(".unxp");
	const cmrButton = document.querySelector(".cmr");
	crsrdButton.addEventListener("mouseover", () => {handleHover(crsrdButton);});
	unxpButton.addEventListener("mouseover", () => {handleHover(unxpButton);});
	cmrButton.addEventListener("mouseover", () => {handleHover(cmrButton);});

코드를 작성 하고 보니.. 괜한 짓을 한건가 싶은데.. 공부가 됐으니 만족한다.

후후후.......