img src SVG로 스타일을 바꾸는 SVG

373

html

<img src="logo.svg" alt="Logo" class="logo-img">

CSS

.logo-img path {
  fill: #000;
}

위의 svg 가로 드되고 기본적으로 fill: #fff위의 css검은 색으로 변경하려고 시도해도 변경되지 않습니다. 이것은 SVG를 처음 사용하는 이유이며 왜 작동하지 않는지 잘 모르겠습니다.

css  image  svg 
— 놀이터
소스
25
SVG 이미지 에는 영향을 줄 수 없습니다 ... 인라인 SVG 요소 만
— Paulie_D
1
— Icarus
SVG와 CSS의 내용을 사용하려면 내 대답을 확인하십시오. stackoverflow.com/questions/11978995/…
— Benjamin
3
— polRk

답변:

153

로고 색상을 변경하는 것이 목표이고 CSS를 사용해야 할 필요는 없지만 이전 답변에서 제안한대로 자바 스크립트 또는 jquery를 사용하지 마십시오.

원래 질문에 정확하게 대답하려면 다음을 수행하십시오.

  1. logo.svg텍스트 편집기에서를 엽니 다 .

  2. 찾아서 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>

... 그냥 채우기를 변경하고 저장하십시오.

— 로우 모어 하우스
소스
6
... "채우기"가 없으면 path또는에 circle항목 을 추가하면됩니다 <path fill="#777777" d="m129.774,74.409c-5.523,....
— SaeX 2016 년
1
로고에 머리글에 하나의 색상이 있고 바닥 글에 다른 색이있는 경우 어떻게합니까?
— rubens.lopes 2016 년
. @ ruben.lopes 두 개의 다른 파일 또는 두 개의 다른 인라인이 가장 간단합니다
— Rowe Morehouse
11
당신은 또한 fill="currentColor"다음을 사용할 수 있습니다 color부모 요소 css-tricks.com/cascading-svg-fill-color
— Serge
10
이것은 분명히 가능하며 실제로 유용한 답변은 아닙니다.
— Timmmm
102

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

— 안드레 쿨만
소스
3
따라서 내부 웹 사이트를 제외하고는 사용할 수 없습니다.
— Henrik Vendelbo
9
89 % 글로벌 지원 2016 5월 29일의 등
— Gajus
1
이것은 CSS에서 데이터 URI 이외의 것을 사용하는 것이 약간의 고통이되는 여기에 설명 된 것과 같은 상황에 대한 놀라운 솔루션입니다 . 감사!
— Gark Garcia
3
작동하지 않습니다. 그것은 mask입니다 invalid property value. 크롬에서 이것을 테스트하고 있습니다.
— Eren555
1
@MadMac 동일한 버전의 Chrome을 실행하고 있지만 해당 동작을 복제 할 수 없었습니다. 시도한 JSFiddle 또는 코드입니까?
— André Kuhlmann
78

순수한 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/

— 페리
소스
최근에 내 시도 중 하나를 사용하여 다른 브라우저와 Edge에서 다른 색상을 얻었습니다.
— Julix
4
이것은 대부분의 브라우저에서 작동하지만 IOS-Safari 브라우저에 문제가 있습니다.
— Simon Ludwig
30

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)".

— 북아메리카 인
소스
1
이에 대한 브라우저 지원
— Kevin Goedecke
@KevinGoedecke Chrome, Firefox, Safari 및 Edge
— northamerican
4
SVG 2 에서 더 이상 사용되지 않는 것 같습니다
— vsync
5
@northamerican- "proofs"와 같은 다른 stackoverflow 답변에 대한 링크는 관련이 없습니다. 누구나이 플랫폼에서 무엇이든 쓸 수 있습니다. MDN :"This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped"
— vsync
8
xlink:href에 찬성하여 더 이상 사용되지 않는 것 같습니다 href. 따라서 이것은 여전히 ​​작동 할 수 있습니다.
— Benjamin Intal
20

먼저 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 주입과 관련된 몇 가지 문제를 해결합니다.

  1. 주입이 완료 될 때까지 SVG를 숨길 수 있습니다. 로드 시간 동안 스타일이 이미 적용된 경우 중요합니다. 그렇지 않으면 짧은 "스타일이 지정되지 않은 콘텐츠 플래시"가 발생할 수 있습니다.

  2. <img>요소는 자동으로 자신을 주입. SVG를 동적으로 추가하면 주입 기능을 다시 호출 할 필요가 없습니다.

  3. SVG가 두 번 이상 주입 된 경우 문서에서 동일한 ID를 여러 번 사용하지 않도록 SVG의 각 ID에 임의의 문자열이 추가됩니다.

SVGInject는 일반 Javascript이며 SVG를 지원하는 모든 브라우저에서 작동합니다.

면책 조항 : 저는 SVGInject의 공동 저자입니다

— 와루 야마
소스
3
이것은 가장 간단한 대답입니다. Chrome, Firefox 및 Edge에서 테스트했으며 완벽하게 작동합니다.
— Sébastien Lorion 2016 년
15

@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');
});
— 맷 우 je
소스
1
SVG가 인라인으로 시작한 경우에만 작동하지 않습니까?
— 다니엘 톰슨
예. 그러나 많은 SVG 파일을 사용하거나 정기적으로 업데이트하는 경우 관리하기가 어렵습니다.
— Matt Wujek
15

svg 이미지 또는 이미지로 웹 글꼴을 만들고 CSS에서 웹 글꼴을 가져온 다음 CSS 색상 속성을 사용하여 글리프의 색상을 변경하십시오. 자바 스크립트가 필요하지 않습니다

— 외국인
소스
5
svg에 다른 색상의 여러 요소가있는 경우이 솔루션은 매우 해킹됩니다 (여러 요소가 삽입 됨).
— kakaja
1
@kakaja 이것은 하나의 색상을 가진 벡터 이미지만을위한 솔루션입니다. 자세한 내용은 bpulecio의 답변을 참조하십시오
— gringo
1
아이콘이 텍스트가 아니기 때문입니다. 글꼴은 텍스트 용입니다. SVG는 아이콘입니다.
— Lazar Ljubenović
2
@ LazarLjubenović-기술적으로 텍스트는 기호 인 문자로 만들어지고 아이콘도 기호이므로 많은 사람들이 아이콘 글꼴을 사용하는 데 문제가없는 이유입니다. "또 다른"텍스트 언어를 만드는 것과 같습니다. 만다린은 문자가 아닌 "아이콘"을 사용합니다. 인류가 아이콘을 "텍스트"로 사용하는 것은 드문 일이 아닙니다
— vsync
1
이것은 흥미로운 해결책으로 들리지만, "왜 그렇지 않은"대신에 "방법"과 같은 것에 대한 답을 정교하게 추천합니다
— YakovL
15

이 답변은 https://stackoverflow.com/a/24933495/3890888 답변을 기반으로 하지만 거기에 사용되는 스크립트의 일반 JavaScript 버전이 있습니다.

SVG를 인라인 SVG . svg이미지에 클래스 를 추가하여이 스크립트를 사용할 수 있습니다 .

/*
 * Replace all SVG images with inline SVG
 */
document.querySelectorAll('img.svg').forEach(function(img){
    var imgID = img.id;
    var imgClass = img.className;
    var imgURL = img.src;

    fetch(imgURL).then(function(response) {
        return response.text();
    }).then(function(text){

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");

        // Get the SVG tag, ignore the rest
        var svg = xmlDoc.getElementsByTagName('svg')[0];

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        svg.removeAttribute('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
        }

        // Replace image with new SVG
        img.parentNode.replaceChild(svg, img);

    });

});

그런 다음 이제 수행하십시오.

.logo-img path {
  fill: #000;
}

아니면 :

.logo-img path {
  background-color: #000;
}

JSFiddle : http://jsfiddle.net/erxu0dzz/1/

— Seb3736
소스
1
대단한 일. 또한 페이지에 여러 svgs가 있으면 IIFE에 페치 블록을 넣어야합니다.
— Sandeep Sharma
1
큰! ES6과 잘 작동합니다. IE 9에 관심이 없다면 다음을 사용할 수도 있습니다. parser.parseFromString(text, "image/svg+xml");
— ChristoKiwi
iOS 9.3.5의 UIWebView에서 작동하지 않습니다. 내가 생각하는 그것의 사용으로 인해 수 있습니다 fetch10.1 사파리에 추가 (한 developer.mozilla.org/en-US/docs/Web/API/Fetch_API ). 위의 jQuery 버전이 작동합니다.
— Maria-Ines Carrera
7

필터를 사용하여 모든 색상으로 변환하십시오.

나는 최근 에이 솔루션을 찾았으며 누군가가 그것을 사용할 수 있기를 바랍니다. 이 솔루션은 필터를 사용하므로 모든 유형의 이미지와 함께 사용할 수 있습니다. svg만이 아닙니다.

색상을 변경하려는 단색 이미지가있는 경우 일부 필터를 사용하여이 작업을 수행 할 수 있습니다. 물론 여러 가지 색상의 이미지에서도 작동하지만 특정 색상을 타겟팅 할 수는 없습니다. 전체 이미지 만.

CSS 필터 만 사용하여 특정 색상으로 검정을 변환하는 방법에서 제안 된 스크립트에서 필터를 가져 왔습니다. 흰색을 임의의 색상으로 변경하려면 각 필터의 ​​반전 값을 조정할 수 있습니다.

.startAsBlack{
  display: inline-block;
  width: 50px;
  height: 50px;
  background: black;
}

.black-green{
  filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%);
}

.black-red{
  filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%);
}

.black-blue{
  filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%);
}

.black-purple{
  filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%);
}
Black to any color: <br/>
<div class="startAsBlack black-green"></div>
<div class="startAsBlack black-red"></div>
<div class="startAsBlack black-blue"></div>
<div class="startAsBlack black-purple"></div>
스 니펫 확장

— 재스퍼
소스
4

@gringo 답변을 확장하려면 다른 답변에 설명 된 Javascript 방법이 작동하지만 사용자가 불필요한 이미지 파일을 다운로드해야하며 IMO가 필요하면 코드가 부풀어 오른다.

더 좋은 방법은 모든 1 색 벡터 그래픽을 웹 폰트 파일로 마이그레이션하는 것입니다. 내가 사용했던 포트가 굉장과거에는 을 사용자 정의 아이콘 / 이미지를 SVG 형식으로 결합하고 사용중인 타사 아이콘 (Font Awesome, Bootstrap 아이콘 등)을 단일 웹 글꼴 파일로 결합하는 것이 좋습니다. 사용자가 다운로드해야합니다. 사용자 정의 할 수도 있으므로 사용중인 타사 아이콘 만 포함하십시오. 이렇게하면 페이지 요청 횟수가 줄어들고 특히 타사 아이콘 라이브러리를 이미 포함하고있는 경우 전체 페이지 무게가 늘어납니다.

보다 개발 지향적 인 옵션을 선호하는 경우 Google "npm svg webfont" 를 사용하고 환경에 가장 적합한 노드 모듈 중 하나를 사용할 수 있습니다.

이 두 가지 옵션 중 하나를 수행하면 CSS를 통해 색상을 쉽게 변경할 수 있으며 프로세스에서 사이트를 빠르게 검색했을 수 있습니다.

— bpulecio
소스
SVG 스프라이트를 사용해보십시오. 내 경험상 웹 글꼴에는 브라우저 릴리스간에 임의의 문제가 있습니다. 이것을 시도하십시오 : fontastic.me -SVG 스프라이트 버전을 사용하십시오-당신의 생각을보십시오. :)
— sheriffderek
4

실제 색상과 흑백 사이에서 이미지를 전환하는 경우 하나의 선택기를 다음과 같이 설정할 수 있습니다.

{필터 : 없음;}

그리고 다른 하나 :

{filter:grayscale(100%);}
— wcb1
소스
3

단순한..

이 코드를 사용할 수 있습니다 :

<svg class="logo">
  <use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>

먼저 svg의 경로를 지정한 다음 ID를 작성하십시오 (이 경우 "Capa_1"). 편집기에서 svg를 열어서 ID를 얻을 수 있습니다.

CSS에서 : 

.logo {
  fill: red;
}
— 함자 자말
소스
kabrice,이 코드를 사용할 수 있습니다 codepen.io/hmzajmal/pen/ZEGvWYa
— Hamza Jamal
2

귀하의 경우 주요 문제 <img>는 SVG 구조를 숨길 태그 에서 svg를 가져 오는 것입니다.

원하는 효과를 얻으려면 <svg>태그와 함께 태그 를 사용해야합니다 <use>. 제대로 작동하려면 idSVG 파일에서 사용하려는 경로 를 제공 한 <path id='myName'...>다음 <use xlink:href="#myName"/>태그 에서 검색 할 수 있어야합니다 . 아래에서 찍어보십시오.

코드 스 니펫 표시

외부 소스# 에서 SVG를로드하고 HTML에 포함하지 않으려는 경우 조각 앞에 URL을 넣을 수 있습니다 . 또한 일반적으로 CSS에 채우기를 지정하지 않습니다. SVG 자체 내에서 사용하는 것이 좋습니다 . 그런 다음 해당 요소의 CSS 색상 값이 사용됩니다.fill:"currentColor"

— 플라 비엔 볼켄
소스
2

SVG는 기본적으로 코드이므로 내용 만 있으면됩니다. PHP를 사용하여 내용을 얻었지만 원하는 것을 사용할 수 있습니다.

<?php
$content    = file_get_contents($pathToSVG);
?>

그런 다음 div 컨테이너 안에 "있는 그대로"내용을 인쇄했습니다.

<div class="fill-class"><?php echo $content;?></div>

CSS에서 규칙을 컨테이너의 SVG 자식으로 규칙적으로 설정하려면

.fill-class > svg { 
    fill: orange;
}

재료 아이콘 SVG 로이 결과를 얻었습니다.

Mozilla Firefox 59.0.2 (64 비트) Linux

여기에 이미지 설명을 입력하십시오

Google Chrome66.0.3359.181 (빌드 oficial) (64 비트) Linux

여기에 이미지 설명을 입력하십시오

오페라 53.0.2907.37 Linux

여기에 이미지 설명을 입력하십시오

— 베냐민
소스
공감할 수는 없지만 절대 절대 그렇게하지 마십시오.
— 샌더
5
원인? 대안?
— Benjamin
이것을하지 않는 이유는 브라우저가 SVG를 캐시하지 못하게하기 때문입니다. 대안은 여기에 다른 답변에서 언급 된 SVG 인젝터를 사용하는 것입니다. SVG 파일은 여전히 ​​브라우저에 의해 캐시되며, 주입 된 SVG는 여전히 CSS로 스타일을 지정할 수 있습니다. 하지만 난 당신을 downvote하지 않습니다.
— Sơn Trần-Nguyễn
이해하지만 어쨌든 캐시는 언급되지 않았습니다. 가장 좋은 답변은 헤더 만료 조작으로 파일 이름 링크 후 해시를 강제로 다시로드하거나 매번 다시로드 할 수있는 JavaScript 코드를 가지고 있습니다. 감사합니다. 감사하지는 않지만 CSS 채우기 속성을 사용하여 SVG를 변경하여 해결하는 것으로 여전히 믿습니다.
— Benjamin
2

이것은 PHP함께 사용하는 사람들에게 도움이 될 수 있습니다.svgCSS로 조작하려는 이미지 .

CSS로 img 태그 내부의 속성을 덮어 쓸 수 없습니다. 그러나 svg 소스 코드가 HTML에 포함되면 확실하게 할 수 있습니다. 내가 require_once포함하는 기능 으로이 문제를 해결하고 싶습니다 ..svg.php파일을 . 이미지를 가져 오는 것과 비슷하지만 CSS로 스타일을 덮어 쓸 수 있습니다!

먼저 svg 파일을 포함 시키십시오 :

<?php require_once( '/assets/images/my-icon.svg.php' ); ?>

그리고이 아이콘이 포함됩니다 : 

<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><g transform="translate(-639.749 -3139)"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></g></svg>

이제 CSS를 사용하여 채우기 색상을 쉽게 변경할 수 있습니다.

svg path {
  fill: blue;
}

먼저이 문제를 해결하려고했지만 file_get_contents()위의 솔루션이 훨씬 빠릅니다.

— 플로리스
소스
0

이것이 오래된 질문이라는 것을 알고 있지만 최근에 같은 문제가 발생하여 서버 측에서 해결했습니다. 이것은 PHP 전용 답변이지만 다른 envs에 비슷한 것이 있다고 긍정적입니다. img 태그를 사용하는 대신 svg를 get-go에서 svg로 렌더링합니다.

public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile->load($file);
    $tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
    return $tag;
}

이제 파일을 렌더링하면 완전한 인라인 svg가 표시됩니다.

— 네 켐야 운가
소스
0

코드 편집기에서 svg 아이콘을 열고 경로 태그 뒤에 클래스를 추가하십시오.

<path class'colorToChange' ...

svg에 클래스를 추가하고 다음과 같이 색상을 변경할 수 있습니다.

코드 펜

— 함자 자말
소스
-2

JQuery에 액세스 할 수 있다면 Praveen의 답변으로 확장하면 SVG에 의해 다른 중첩 요소의 색상을 프로그래밍 방식으로 변경할 수 있습니다.

$('svg').find('path, text').css('fill', '#ffffff');

찾기 내에서 색상을 변경해야하는 다른 요소를 언급 할 수 있습니다.

— Manyu
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.