html
<img src="logo.svg" alt="Logo" class="logo-img">
CSS
.logo-img path {
fill: #000;
}
위의 svg 가로 드되고 기본적으로 fill: #fff
위의 css
검은 색으로 변경하려고 시도해도 변경되지 않습니다. 이것은 SVG를 처음 사용하는 이유이며 왜 작동하지 않는지 잘 모르겠습니다.
답변
로고 색상을 변경하는 것이 목표이고 CSS를 사용해야 할 필요는 없지만 이전 답변에서 제안한대로 자바 스크립트 또는 jquery를 사용하지 마십시오.
원래 질문에 정확하게 대답하려면 다음을 수행하십시오.
-
logo.svg
텍스트 편집기에서를 엽니 다 . -
찾아서
fill: #fff
교체하십시오fill: #000
예를 들어, logo.svg
텍스트 편집기에서 열면 다음과 같이 보일 수 있습니다.
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>
… 그냥 채우기를 변경하고 저장하십시오.
답변
SVG를 마스크로 설정할 수 있습니다. 이렇게하면 배경색을 설정하면 채우기 색상으로 작동합니다.
HTML
<div class="logo"></div>
CSS
.logo {
background-color: red;
-webkit-mask: url(logo.svg) no-repeat center;
mask: url(logo.svg) no-repeat center;
}
JSFiddle : https://jsfiddle.net/KuhlTime/2j8exgcb/
MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/mask
브라우저가이 기능을 지원하는지 확인하십시오 :
https://caniuse.com/#search=mask
답변
순수한 CSS를 사용해보십시오.
.logo-img {
// to black
filter: invert(1);
// or to blue
// filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
}
이 기사에서 더 많은 정보 https://blog.union.io/code/2017/08/10/img-svg-fill/
답변
2018 : 동적 색상을 원한다면 자바 스크립트를 사용하지 않고 인라인 SVG를 원하지 않으면 CSS 변수를 사용하십시오. Chrome, Firefox 및 Safari에서 작동합니다. 편집 : 그리고 가장자리
<svg>
<use xlink:href="logo.svg" style="--color_fill: #000;"></use>
</svg>
SVG에서 모든 인스턴스를 style="fill: #000"
로 바꿉니다 style="fill: var(--color_fill)"
.
답변
먼저 SVG를 HTML DOM에 삽입해야합니다.
이를 위해 SVGInject 라는 오픈 소스 라이브러리 가 있습니다. onload
속성을 사용하여 주입을 트리거합니다.
SVGInject를 사용하는 최소한의 예는 다음과 같습니다.
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
이미지가로드 된 후 onload="SVGInject(this)
주입이 트리거되고 <img>
요소가 src
속성에 제공된 SVG 파일의 내용으로 대체됩니다 .
SVG 주입과 관련된 몇 가지 문제를 해결합니다.
-
주입이 완료 될 때까지 SVG를 숨길 수 있습니다. 로드 시간 동안 스타일이 이미 적용된 경우 중요합니다. 그렇지 않으면 짧은 “스타일이 지정되지 않은 콘텐츠 플래시”가 발생할 수 있습니다.
-
<img>
요소는 자동으로 자신을 주입. SVG를 동적으로 추가하면 주입 기능을 다시 호출 할 필요가 없습니다. -
SVG가 두 번 이상 주입 된 경우 문서에서 동일한 ID를 여러 번 사용하지 않도록 SVG의 각 ID에 임의의 문자열이 추가됩니다.
SVGInject는 일반 Javascript이며 SVG를 지원하는 모든 브라우저에서 작동합니다.
면책 조항 : 저는 SVGInject의 공동 저자입니다
답변
@Praveen의 대답은 확실합니다.
내 작업에서 응답 할 수 없으므로 jquery hover 함수를 만들었습니다.
CSS
.svg path {
transition:0.3s all !important;
}
JS / JQuery
// code from above wrapped into a function
replaceSVG();
// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
var el = $(this);
var svg = el.find('svg path');
svg.attr('fill', '#CCC');
}, function() {
var el = $(this);
var svg = el.find('svg path');
svg.attr('fill', '#3A3A3A');
});
답변
svg 이미지 또는 이미지로 웹 글꼴을 만들고 CSS에서 웹 글꼴을 가져온 다음 CSS 색상 속성을 사용하여 글리프의 색상을 변경하십시오. 자바 스크립트가 필요하지 않습니다