Changing Colors in an SVG Element Using CSS and JavaScript

<div class="container">
    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
        <g id="SVGRepo_iconCarrier"> 
            <path d="M12 5V19M12 5L6 11M12 5L18 11" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
        </g>
    </svg>
</div>

SVG 요소는 기존 이미지 포맷들과 다르게 HTML DOM 구조와 공통점이 많다.

CSS 로 색 바꾸기

- 선택자

- 커스텀 속성

자바스크립트로 색 바꾸기

- querySelector, setAttribute 사용

---

참조

https://kirupa.com/web/changing_colors_svg_css_javascript.htm