SVG 인라인 로드 및 채우기 색상 변경

Question

SVG를 사용하는 방법은 다음과 같습니다.

으아아아

resource.svg입니다:

으아아아

이제 svg의 색상을 동적으로 변경해야 합니다. 이를 위해 SVG를 링크가 아닌 전체(인라인?) 로드한 다음 채우기 및 획의 값을 바꿀 수 있는지(문자열 대체 사용) 고려했습니다. 인라인으로 사용하면 CSS에서도 가능합니까?

이것이 가능하다면 누군가 나를 도와줄 수 있나요? 그렇다면 어떤 방향으로 더 연구해야 할까요?

Answer 1

svg 코드에서 채우기 속성을 제거합니다. 이로 인해 지금처럼 항상 흰색이 됩니다. 또는 프레임워크에서 작업하는 경우 채우기 속성을 동적으로 만들 수 있습니다(예: fill={{myProp}}).