svg 요소의 색상을 변경하는 방법은 무엇입니까?

350

이 기술을 http://css-tricks.com/svg-fallbacks/ 사용 하고 svg 색상을 변경하고 싶지만 지금까지는 그렇게 할 수 없었습니다. 나는 이것을 CSS에 넣었지만 내 이미지는 항상 검은 색입니다. 내 코드 :

.change-my-color {
  fill: green;
}
<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>
스 니펫 확장

css  svg 
— 바바라
소스
나는 svg 전문가가 아니지만 채우기를 배경색으로 변경하려고 시도 했습니까?
— Meg
svg background-color의 @Megan은 'fill'속성으로 지정되고 테두리는 'stroke'로 지정됩니다 (Illustrator에서와 같이). w3.org/TR/SVG/propidx.html
— Barbara
4
HTML 문서의 CSS는 <img /> 내의 SVG 요소에 적용되지 않습니다.
— pawel
1
이것은 지금 가능합니다. 간단하고 기능적인 답변 : stackoverflow.com/a/53336754/467240
— mtyson

답변:

188

그런 식으로 이미지의 색상을 변경할 수 없습니다. SVG를 이미지로로드하면 브라우저에서 CSS 또는 Javascript를 사용하여 이미지가 표시되는 방식을 변경할 수 없습니다.

당신이 당신의 SVG 이미지를 변경하려는 경우, 당신은 그것을 사용하여로드해야 <object>, <iframe>또는 사용하여 <svg>인라인.

페이지의 기술을 사용하려면 SVG 지원을 확인하고 조건부로 대체 이미지를 표시하거나 표시 할 수없는 Modernizr 라이브러리가 필요합니다. 그런 다음 SVG를 인라인하고 필요한 스타일을 적용 할 수 있습니다.

보다 :

코드 스 니펫 표시

SVG를 인라인하고 대체 이미지에 클래스 이름 ( my-svg-alternate)으로 태그를 지정할 수 있습니다 .

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

그리고 CSS no-svg에서 Modernizr (CDN : http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) 의 클래스를 사용하여 SVG 지원을 확인하십시오. SVG 지원이없는 경우 SVG 블록이 무시되고 이미지가 표시되고, 그렇지 않으면 이미지가 DOM 트리에서 제거됩니다 ( display: none).

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

그런 다음 인라인 요소의 색상을 변경할 수 있습니다.

#time-3-icon {
   fill: green;
}
— 개최 자
소스
5
object호스팅 문서에서 내장 SVG의 스타일을 지정할 수 없습니다 .
— Javier Rey
1
@JavierRey 자바 스크립트를 통해 객체 태그의 내용에 스타일을 삽입 할 수 있습니다. 그러나 호스팅 문서의 스타일 시트에 추가하면 적용되지 않는 것이 맞습니다.
— Robert Longson
2
@ manish-menaria의 솔루션을 사용하고 있으며 완벽하게 작동합니다.
— Ryan Ellis
1
허용되는 답변은 다음과 같이 변경되어야합니다. stackoverflow.com/a/53336754/467240
— mtyson
376

2020 답변

CSS 필터는 모든 현재 브라우저에서 작동합니다

SVG 색상을 변경하려면

  1. <img>태그를 사용하여 SVG 이미지를 추가하십시오 .
<img src="dotted-arrow.svg" class="filter-green"/>
  1. 특정 색상으로 필터링하려면 다음 코드 펜 (여기를 클릭하여 코드 펜 열기) 을 사용하여 16 진 색상 코드를 CSS 필터로 변환하십시오.

예를 들어,에 대한 출력 #00EE00은

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
  1. filter이 클래스에 CSS 를 추가하십시오 .
    .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }
— 매니쉬 메나리 아
소스
5
이전 브라우저 버전에서는 지원되지 않는 일반적인 경고가 있습니다. developer.mozilla.org/en-US/docs/Web/CSS/…
— Kevin Wang
17
CodePen에서 언급했듯이 SVG가 검은 색이 아닌 경우 (광산이 회색) brightness(0) saturate(100%)필터 목록의 시작 부분에 추가 하면 먼저 100 % 검은 색으로 바뀌어 다른 필터가 올바른 색상으로 변경할 수 있습니다.
— jdunning
2
또한이 CodeOver에 대한 이 StackOverflow 질문 의 솔루션에 대한 많은 흥미로운 배경이 있습니다.
— jdunning
3
내 남자. 지원은 허용되는 caniuse.com/#feat=css-filters로 보입니다 .
— Sam Doidge
잘 작동 하고이 관계없는 코드 펜을 사용하여 내 16 진수를 필터에 넣었습니다
— WEBjuju
220

SVG의 색상을 변경하려면 텍스트 편집기에서 svg 파일 을 열어 svg 코드를 직접 변경할 수 있습니다 . 코드는 아래 코드처럼 보일 수 있습니다

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

path, circle, polygon 등과 같은 일부 XML 태그 가 있음을 알 수 있습니다 . 여기에서 style 속성을 사용하여 자신의 색상을 추가 할 수 있습니다 . 아래 예를보십시오

<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

필요한 태그의 SVG를 얻을 수 있도록 모든 속성에 style 속성을 추가하십시오

— 수 샨트
소스
48
왜 다음 fill과 같은 속성을 사용하지 fill = "#AB7C94"않습니까? 확실하지 왜 ' style속성이 필요하다
— bg17aw
4
안녕 다니엘, 그래. 채우기를 속성으로 사용할 수 있다는 것을 몰랐습니다. 귀하의 코멘트를 너무 오래 알리지 않아서 죄송합니다 @ bg17aw
— sushant047
30

필터 설정을 통해 SVG를 색칠하기 위해 테스트 페이지를 추가했습니다.

EG filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

SVG 업로드 및 색상 지정-Jsfiddle

https://blog.union.io/code/2017/08/10/img-svg-fill/ 에서 아이디어를 얻었습니다.

— 요나탄 아얄 론
소스
1
고마워, 당신은 나 자신을 구해줘 .custom-disabled > svg {filter:invert(0.2) sepia(1) saturte(0) hue-rotate(0);}아이콘을 비활성화 해야하는 작업을 수행했습니다.
— roger
20

경로 정보가있는 SVG 만 . 당신은 이미지에 그렇게 할 수 없습니다 .. 경로로 당신은 스트로크를 변경하고 정보를 채울 수 있고 당신은 끝났습니다. 일러스트 레이터처럼

그래서 : CSS를 통해 경로 fill값을 덮어 쓸 수 있습니다

path { fill: orange; }

그러나 호버링 효과가 발생할 때 텍스트로 변경하려는 경우보다 유연한 방법을 원한다면 사용하십시오. 

path { fill: currentcolor; }

body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}
<div class='parent'>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>
스 니펫 확장

— 비스 크렘 무하마드
소스
12

가장 쉬운 방법은 https://icomoon.io/app/#/select 등과 같은 서비스를 사용하여 SVG에서 글꼴을 만드는 것입니다 . SVG를 업로드하고 "글꼴 생성"을 클릭 한 다음 글꼴 파일과 CSS를 측면에 포함시키고 다른 텍스트처럼 사용하고 스타일을 지정하십시오. 스타일링이 훨씬 쉬워지기 때문에 항상 이렇게 사용합니다.

편집 : @ CodeMouse92에 의해 논평 된 기사 에서 언급했듯이 아이콘 글꼴은 화면 판독기를 엉망으로 만듭니다 (SEO에 좋지 않을 수 있습니다). 따라서 SVG를 고수하십시오.

— 펠릭스 하그 슈필
소스
4
또한 화면 판독기를 엉망으로 만듭니다. 참조 SEREN 데이비스에 의해 "아이콘 글꼴로 죽음"
— CodeMouse92
7

배경색 이 있는 상자 요소의 SVG 마스크 는 다음과 같습니다.

.icon{
  --size     : 70px;
  display    : inline-block;
  width      : var(--size);
  height     : var(--size);
  transition : .12s;
  -webkit-mask-size: cover;
  mask-size  : cover;
}

.icon-bike{
  background: black;
  -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
  mask-image: url(hhttps://image.flaticon.com/icons/svg/89/89139.svg);
  animation: 1s frames infinite ease;
}

@keyframes frames {
  50% { background:red;  }
}
<i class="icon icon-bike" style="--size:150px"></i>
스 니펫 확장

참고 -Internet Explorer 브라우저 에서는 SVG 마스크가 지원되지 않습니다.

— vsync
소스
1
고마워, @vsync 이것은 내가 필요한 것에 대한 최고의 해킹 일뿐입니다.
— Vixson은
6

몇 가지 트릭을 사용하면 CSS로 SVG 색상을 변경할 수 있습니다. 나는 그것을 위해 작은 스크립트를 썼다.

  • svg 이미지가있는 요소 목록을 살펴보십시오.
  • svg 파일을 xml로로드
  • svg 부분 만 가져 오기
  • 경로 색상 변경
  • src를 인라인 이미지로 수정 된 svg로 교체
$('img.svg-changeable').each(function () {
  var $e = $(this);
  var imgURL = $e.prop('src');

  $.get(imgURL, function (data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');

    // change the color
    $svg.find('path').attr('fill', '#000');

    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
  });

});

위의 코드가 올바르게 작동하지 않을 수 있습니다. 이것은 svg 배경 이미지가있는 요소에 대해 거의 비슷하게 구현했습니다. 그러나 어쨌든이 스크립트를 수정하여 상황에 맞게해야합니다. 그것이 도움이 되었기를 바랍니다.

— 사이 독
소스
그건 그렇고 : 당신이 RoR 개발자 인 경우, 작업을 수행 할 수있는 sass 사전 컴파일러에 대한 새로운 방법을 추가 할 수 있습니다. 컴파일 된 CSS 파일에 base64로 인코딩 된 올바른 색상 이미지가 있기 때문에 훨씬 좋습니다. 더 이상 JS가 필요하지 않았습니다! 내가 작성한 코드를 제공하고 CTO와 대화해야 할 수도 있습니다.
— cydoc
2
할 수 없다고 말하는 것보다 해결책을 제공하기 위해 +1. 이 답변은 관련이 있습니다 : stackoverflow.com/questions/11978995/…
— claytronicon
5

svg 내의 경로를 대상으로합니다 :

<svg>
   <path>....
</svg>

다음과 같이 인라인으로 할 수 있습니다.

<path fill="#ccc">

또는

svg{
   path{
        fill: #ccc
— 마이클 필립스
소스
2

인라인 svg, 예를 들어 CSS의 배경 이미지 로이 작업을 수행하려면 다음을 수행하십시오.

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");
스 니펫 확장

물론 ...을 인라인 이미지 코드로 바꿉니다.

— 비전 하이브
소스
2

예를 들어 HTML에서 :

<body>
  <svg viewBox="" width="" height="">
    <path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
  </svg>
</body>

jQuery를 사용하십시오.

$("#struct1").css("fill","<desired colour>");
— Grv97
소스
이것은 SVG 파일을 HTML에 인라인으로 포함하는 경우에만 작동합니다. 이를 명확하게하기 위해 귀하의 답변을 편집했습니다.
— Flimm
0

실제로,이 문제에 대한 훨씬 더 유연한 해결책이 있습니다 : 웹 컴포넌트 를 작성하여 SVG를 런타임에 텍스트로 패치합니다. JSFiddle에 대한 링크와 함께 요지에 게시 됨

필터 : 반전 (42 %) 세피아 (93 %) 포화물 (1352 %) 색조-회전 (87deg) 밝기 (119 %) 대비 (119 %);

<html>

<head>
  <title>SVG with color</title>
</head>

<body>
  <script>
    (function () {
      const createSvg = (color = '#ff9933') => `
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="76px" height="22px" viewBox="-0.5 -0.5 76 22">
            <defs/>
              <g>
                <ellipse cx="5" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <ellipse cx="70" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <path d="M 9.47 12.24 L 17.24 16.12 Q 25 20 30 13 L 32.5 9.5 Q 35 6 40 9 L 42.5 10.5 Q 45 12 50 6 L 52.5 3 Q 55 0 60.73 3.23 L 66.46 6.46" fill="none" stroke="#ff9933" stroke-miterlimit="10" pointer-events="stroke"/>
              </g>
          </svg>`.split('#ff9933').join(color);

      function SvgWithColor() {
        const div = Reflect.construct(HTMLElement, [], SvgWithColor);
        const color = div.hasAttribute('color') ? div.getAttribute('color') : 'cyan';
        div.innerHTML = createSvg(color);
        return div;
      }

      SvgWithColor.prototype = Object.create(HTMLElement.prototype);
      customElements.define('svg-with-color', SvgWithColor);

      document.body.innerHTML += `<svg-with-color
        color='magenta' 
      ></svg-with-color>`;

    })();

  </script>
</body>

</html>
— 페트르 트리 폴 스키
소스
-1

가장 짧은 부트 스트랩 호환 방식, JavaScript 없음 :

.cameraicon {
height: 1.6em;/* set your own icon size */
mask: url(/camera.svg); /* path to your image */
-webkit-mask: url(/camera.svg) no-repeat center;
}

다음과 같이 사용하십시오.

<td class="text-center">
    <div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>
— 울프 레보 고양이
소스
-1

브라우저를 사용하여 이미지를 열고 페이지 소스보기에서 이미지를 마우스 오른쪽 단추로 클릭하면 이미지의 svg 태그가 표시됩니다. HTML에 복사하여 붙여 넣은 다음 원하는 색상으로 채우기를 변경하십시오.

— 키에 멜리 아카
소스
허용 대답은 이미 인라인 다음 솔루션으로 색상을 설정 제안합니다.
— Robert Longson
-1

이미지의 svg 태그에 fill : "desiredColor"를 추가하기 만하면됩니다. 예 :

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#bbb9c6">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
— 시바 니
소스
이것은 기본적 으로이 답변 또는 이
— Robert Longson
그 대답은 경로 태그를 채우는 것을 언급했으며 svg 태그에서 나를 위해 일했습니다. 따라서 게시했습니다
— Shivani
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.