[css] img src SVG로 스타일을 바꾸는 SVG

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 색상 속성을 사용하여 글리프의 색상을 변경하십시오. 자바 스크립트가 필요하지 않습니다