Web Develop
svg 파일 css로 컬러 적용
2021-12-16 08:33
 
 

이미지 삽입

Raspberry Pi List   

#1. Monitoring

개요,

w



svg 포맷을 이용한 이미지 파일의 색상을 변경하는 것에 대해 검색을 해보면 대부분이


svg 파일을 html에 작성해서 fill 또는 CSS를 이용해서 색상을 변경하라는 내용을 볼 수 있습니다.


 


하지만 그렇게 비효율적인 방법이라면 mdi같이 svg 포맷을 폰트로 만들어서 사용했을 듯 합니다.


 


 


SVG 파일의 색상을 HTML 작성 없이 CSS만으로 변경하는 것은 의외로 매우 간단합니다.


 


.svg-test {

background-color: #eeeeee;

    -webkit-mask: url('image.svg') no-repeat center;

    mask: url('image.svg') no-repeat center;

}

이런식으로 mask를 이용해서 image를 불러오고 background 색상을 변경 작업해주면 매우 쉽게 색상을 변경할 수 있습니다.

소개글

원포올 선임 연구원

Kshield Jr. 2기 인증생

Cyber Guardians 수료생

플러터 앱 개발 강사

플라스크 웹 개발 강사

LG 쿠버네티스 보조강사

멀티캠퍼스 악성코드 보조강사

멀티캠퍼스 쿠버네티스 보조강사

금융감독원 쿠버네티스 보조강사

<시스템 해킹 프로토스타> 저자

<안드로이드 앱 개발에 딱 맞는 플러터와 다트 입문> 저자

문의: reasley.com@gmail.com

Category

Project List

Percent

JustCat

TextCount

Weather

Percent

Percent