img src SVG CSS로 스타일 변경

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

css

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

위의 svg가 로드되어 원래 fill: #ffff인데 위의 css를 사용하여 검은색으로 바꾸면 바뀌지 않는다.

Paulie_D
편집된 질문17일 10월 2019 в 5:46
프로그래밍
image svg css
24일 7월 2014 в 12:15
1311 파운드
질문에 대한 의견 (5)

만약 당신의 목표가 단지 로고 색깔을 바꾸는 것이고, 당신이 반드시 CSS를 사용할 필요는 없다면, 몇몇 이전 답변에서 제안했던 것처럼 javascript나 jquery를 사용하지 마세요.

원래의 질문에 정확하게 답하려면, 그냥:

  1. 당신의 '로고'를 엽니다.svg'를 입력한다.

  2. fill: #fff'를 찾아 fill: #000으로 바꿉니다.

예를 들어, 당신의 '로고'.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>

... 내용만 변경하고 저장하세요.

해설 (4)

마스크로 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/] [1]

이 방법은 작동안함 가장자리의 유념하십시오 있지만브라우저에. 이 웹 사이트에 이동하여 있는지 확인할 수 있습니다. [https://caniuse.com/ # 검색 = 마스킹할] [2]

[2]: https://caniuse.com/ # 검색 = 마스킹할

해설 (6)

순결케 시도하시겠습니까 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/ 에서 자세한 정보

해설 (2)

2018년: 원할 경우 다양한 색상을 사용하지 않는, CSS, javascript 벤자민에 로렌아줌마가 인라인 SVG 사용하는 편이다. 크롬, 파이어폭스 및 사파리 작동합니다. 편집: 및 에지

<svg>

</svg>

Svg 를 대체할 수 있는 '스타일 = 인스턴스를 &quot, 칠: # 000&quot, '을 (를)' 스타일 = &quot, 칠: &quot var (-color_fill), '.

northamerican
편집된 답변7일 9월 2018 в 7:48
해설 (6)

@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');
});
Matt Wujek
편집된 답변16일 4월 2015 в 3:53
해설 (2)

  • 이 질문에 대한 대답을 하는 것은 일반 JavaScript 버전니다 there.* 사용되는 스크립트입니다 단 https://stackoverflow.com/a/24933495/3890888

    • 인라인 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;
}
  • 이스피들: * http://jsfiddle.net/erxu0dzz/1/
Community
편집된 답변23일 5월 2017 в 11:54
해설 (4)

먼저 SVG 를 투입할 수 있는 HTML DOM.

There is an open source 라이브러리란 호출됨 즈비그니제치 이 작업을 수행하는 당신꺼에요. It 는 '속성' onload 트리거할 분사.

이것은 즈비그니제치 최소한의 사용한 예:



    <script src="svg-inject.min.js"></script>

이 후 즈비그니제치 (이) ',' 이미지가 로드되었는지 onload = &quot 트리거됩니다 제조하는 ',' 요소, 그리고 &lt img&gt 바뀝니다 SVG 파일을 콘텐트입니다 나와 'src' 속성.

Svg 와 관련된 여러 가지 문제가 인젝션 문제를 해결합니다.

  1. Svg 숨길 수 보살피되 분사 완료되었습니다. 이 경우, 그렇지 않으면 시간이 되는 과정에서 발려짐 중요한 스타일 이미 로드하십시오 인해 짧은 스타일이 적용되지 않은 컨텐트입니다 flash&quot ";).

  2. 이 ',' 요소 투입, 스스로 &lt img&gt 자동으로. # 39 svg 전날에약혼자에게 don& 동적으로 추가할 경우, 함수 호출 제조하는 다시 걱정할 필요 없다.

  3. Svg 는 임의의 문자열을 추가되도록 피하기 위해 각 ID 를 갖고 있는 여러 번 두 번 이상 투입될 경우 문서를 svg 는 동일한 ID.

Svg 를 지원하는 모든 브라우저에서 즈비그니제치 일반 Javascript 와 함께 사용할 수 있다.

  • 부인문을: 나는 공동저자인 즈비그니제치 *
Waruyama
편집된 답변8일 7월 2019 в 11:31
해설 (1)

svg 이미지로 웹 폰트를 만들어 css에서 웹 폰트를 가져온 다음 css 색상 속성을 사용하여 글리프의 색상을 변경하는 것은 어떨까요? javascript 필요 없음

해설 (7)

질문에 대한 대답을 할 수 있지만, 다른 방법을 확장하십시오 @gringo Javascript 에 설명됨 작동됨 单捞磐啊 불필요한 이미지 파일, IMO 얻게된다면 볼록 다운로드할지 사용자 코드에.

내가 생각하는 모든 벡터 그래픽 파일 마이그레이션하려면 1 색상 웹퐁 대한 더 나은 외곽진입 것입니다. # 39, ve i& qopenmp [Fort Awesome] (https://fortawesome.com/) 가 과거에 작동하잖아 멋지구리해요 결합할 수 있으며, 사용자 정의 꾩씠肄 / 이미지 SVG 형식의 모든 3rd party 꾩씠肄 함께 사용할 수도 있습니다 (글꼴색 부트스트랩에 뛰어난, 아이콘, etc.) 를 하나의 웹퐁 파일을 사용자가 다운로드하십시오. It only include the 3rd party 꾩씠肄 you& 사용자정의할 수도 있습니다, 그래서 당신은 # 39, re 사용 중. 이 수를 줄이고, re 전체 페이지를 페이지가 요청률 만들 수 있으며, 특히 # 39, re you& you& # 39 무게:3.67kg 경우 이미 포함하여 3rd party 꾩씠肄 라이브러리보다는.

원할 경우 더 많은 개발 할 수 있는 옵션을 선택하면 정위됩니다 [구글 &quot webfont&quot 고궁박물원, svg,] (https://www.google.com/search? q = npm+svg+webfont) 및 모듈 중 하나를 사용하여 환경에 가장 적합한 노드입니다 that& # 39 의.

39, 이 두 번 you& 두 가지 옵션을 통해 쉽게 변경할 수 있습니다 다음 ve done, 색상, CSS, 대부분 you& # 39 위로 질주하고, ve 사이트에서 이 과정에서.

해설 (1)

그냥 이미지 컬러 및 흑백 간에 스위칭이란 경우 실제 설정할 수 있습니다 1 선택기를 다음과 같습니다.

없음;} {필터:

또 있다.

{filter:grayscale(100%);}
해설 (0)

Svg 는 기본적으로 코드 때문에 그냥 컨텐트에는 합니다. Php 를 사용할 수 있지만, 내가 원하는 건 뭐든지 소유하십시오 컨텐츠를 이용할 수 있다.

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

그런 다음, ve, 컨텐츠 # 39 로 I& 인쇄했습니다 &quot is&quot. div 컨테이너입니다 인사이드라면

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

39 의 CSS 에 대한 규칙을 피나리 설정되었습니다 container& SVG 차일즈

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

내가 맡을게 결과와 함께 재료 꾩씠肄 SVG.

Mozilla Firefox linux*용 59.0.2 (64 비트)

! [입력하십시오. 이미지 여기에 설명을] [1]

구글 Chrome66.0.3359.181 linux*용 (빌드 공식 주제) (64 비트)

! [입력하십시오. 이미지 여기에 설명을] [2]

오페라 53.0.2907.37 linix

! [입력하십시오. 이미지 여기에 설명을] [3]

해설 (4)

이 사건은 매우 문제다 ',' 하는 것, svg 를 임포트하지 틀렸다니까 &lt img&gt 태그번호 숨김니다 SVG 구조.

사용해야 하는 ',', ',' &lt use&gt &lt, svg&gt 태그번호 함께 원하는 효과를 얻을 수 있습니다. 이를 위해 필요한 작업을 한 길로 전달자로써 'id' 에 사용하려는 # 39, & # 39, SVG 파일을 &lt, 경로 id = ',' 에서 검색할 수 있어야 다시 myName& .&gt &lt ',' 태그이고, xlink:;; # myName&quot /&gt href = &quot 사용합니다. 이 시도하시겠습니까 아래에 있다.

<! - begin 스니핏: js 숨기십시오: 진정한 콘솔: 진정한 바벨. &gt 거짓값 -;

.icon {
  display: inline-block;
  width: 2em;
  height: 2em;
  transition: .5s;
  fill: currentColor;
  stroke-width: 5;
  }
  .icon:hover {
    fill: rgba(255,255,255,0);
    stroke: black;
    stroke-width: 2;
    }

.red {
  color: red;
  }

.blue {
  color: blue;
  }
<svg width="0" height="0">

    <path id="home" d="M100 59.375l-18.75-18.75v-28.125h-12.5v15.625l-18.75-18.75-50 50v3.125h12.5v31.25h31.25v-18.75h12.5v18.75h31.25v-31.25h12.5z"/>
</svg>

  <span class="icon red">
          <svg viewbox="0 0 100 100">

          </svg>
        </span>

    <span class="icon blue">
          <svg viewbox="0 0 100 100">

          </svg>
        </span>

끝 - &lt 스니핏 >;!

참고 url 을 넣지 수 있는 부분이 전에 '#' 스케쳐내 읽어들입니다 SVG 의 ui_policytable_java_spe_policy 개외부 소스 (및 포함하지 it 를 HTML). 또한, 일반적으로 지정하지 않은 칠 꽂으십시오 CSS. # 39 ',' s better 를 사용하여 고려해보십시오 it&, SVG, currentColor&quot fill:&quot 내에 있다. 그러면 해당 element& # 39 의 CSS 색상 값을 사용할 수 있는 곳이다.

Flavien Volken
편집된 답변6일 6월 2018 в 9:24
해설 (0)

이것은 오래된 질문 알고 있지만, 우리는 이 같은 문제를 해결할 물어보소서 구현하므로 최근 서버 측에서. 그러나 나는 이 php 는 특정 오토메이티드 양수입니다 있는 다른 env 뭔가를해야합니다 비슷하다. svg 로 svg 를 사용하는 대신 img 태그 너회가 렌더링합니다 얻을 이동.

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

이제 렌더링합니다 완료하십시오 인라인 svg 파일을 때 경험할 수 있습니다.

해설 (0)

Php '함께' '이 유용할 것입니다 사용한 사람들은 자신이 원하는 이미지를 조작할 수 있는' 이스버그 CSS 로.

39 는 CSS 와 함께, img 태그 내에 속성를 덮어씁니다 can& 있습니다. 그러나 svg 내장됩니다 흘로 HTML 소스 코드를 수 있습니다. I like '에는' 어디서 '기능을 통해 이 문제를 해결하기 위해 require_once 오스프고드프프' 절실해졌습니다. # 39 의 it& 같은 이미지를 가져올 수 없지만 여전히 시켜버리므로 덮어씁니다 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"><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"/></svg>

이제 이렇게 쉽게 칠 색상 변경하십시오 CSS 와 함께:

svg path {
  fill: blue;
}

그러나 이 문제를 해결할 수 있는 솔루션 () '' 내가 처음 시도한 file_get_contents 그들위에 훨씬 빠릅니다.

해설 (0)

단순해졌습니다.

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

<svg class="logo">

</svg>

첫 번째 경로를 지정합니다 # 39 의 ID, 이 경우, svg 그리곤요 쓰기 it& Capa_1&quot ";). Svg 열어 믿지아니하며 편집기에는 ID 를 얻을 수 있습니다.

Css 에서:

.logo {
  fill: red;
}
해설 (0)

Jquery 를 액세스할 수 있는 경우, 다음 # 39 의 확장 Praveen& 답해야 할 수 있는 프로그래밍 방식으로 다양한 색상 변경 네스트된 요소를 SVG 기준:

'$ (& # 39, svg& # 39;) 스피드 (& # 39, 경로, text& # 39;) .css (& # 39, & # 39, # # # 39 39 ffffff& fill&;;;).'

서로 다른 색상으로 변경해야 하는 요소를 언급하십시오 내에 찾을 수 있습니다.

해설 (0)