web-dev-qa-db-ja.com

塗りつぶしの色を変更するimg src SVG

html 

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

css 

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

上記のsvgがロードされ、本来はfill: #fffですが、上のcssを使って黒に変更しようとしても変わらないのですが、SVGで遊ぶのは今回が初めてで、なぜうまく動かないのかわかりません。

cssimagecss3svg
257
ngplayground

SVGを インラインSVG にする必要があります。このスクリプトを利用するには、画像にクラスsvgを追加します。

/*
 * Replace all SVG images with inline SVG
 */
jQuery('img.svg').each(function(){
    var $img = jQuery(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

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

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

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

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

        // Replace image with new SVG
        $img.replaceWith($svg);

    }, 'xml');

});

そして今、あなたがするなら：

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

または多分：

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

これはうまくいきます！

フィドル： http://jsfiddle.net/wuSF7/462/

上記のスクリプトのクレジットは： どのようにCSSを使用してSVG画像の色を変更する（jQuery SVG画像置換）？

213
Praveen Kumar Purushothaman

あなたの目標が単にロゴの色を変えることであり、あなたが必ずしもCSSを使う必要がないのなら、前の答えで示唆されたようにjavascriptや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>

...塗りつぶしを変更して保存するだけです。

114
Rowe Morehouse

あなたの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/

この方法はEdgeブラウザでは機能しません。あなたはこのウェブサイトに行くことによってそれをチェックすることができます： https://caniuse.com/#search=mask

53
André Kuhlmann

純粋な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/

36
Feri

@ Praveenからの答えはしっかりしています。

私はそれが私の仕事の中で反応することができなかったので、私はそれのためにjqueryホバー機能を作りました。

_ 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');
});
14
Matt Wujek

2018：動的な色が欲しいなら、javascriptを使いたくない、そしてインライン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)"に置き換えます。

12
northamerican

Svg画像や複数の画像を使ってWebフォントを作成し、CSSにWebフォントをインポートしてから、CSSカラー属性を使用してグリフの色を変更するだけでよいのですか。 JavaScriptは必要ありません

11
gringo

この回答はanswer 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/

11
Seb3736

最初に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の共著者です

6
Waruyama

@gringoの回答を拡張するには、他の回答で説明されているJavascriptメソッドが機能しますが、不要な画像ファイルをダウンロードすることをユーザーに要求し、IMOはコードを肥大化させます。

私はもっ​​と良いやり方はすべての1色ベクトルグラフィックをwebfontファイルに移行することだと思う。私はこれまで Fort Awesome を使っていましたが、あなたが使っているサードパーティのアイコン（Font Awesome、Bootstrapアイコンなど）と一緒にカスタムアイコン/画像をSVGフォーマットで組み合わせるのは素晴らしいことです。ユーザーがダウンロードする必要がある単一のWebフォントファイル。カスタマイズすることもできますので、使用しているサードパーティ製のアイコンのみを含めます。これにより、ページが作成する必要があるリクエストの数が減り、特にサードパーティのアイコンライブラリが既に含まれている場合は、全体的なページの重さが軽減されます。

もっと開発指向のオプションを好むなら、 Google "npm svg webfont" そしてあなたの環境に最も適したノードモジュールの一つを使うことができます。

いったん、あなたはこれらの2つのオプションのどちらかをしました、そして、あなたはCSSを通して色を簡単に変えることができました、そしてたぶん、あなたはその過程であなたのサイトをスピードアップしました。

4
bpulecio

実際の色と白黒の間で画像を切り替えるだけの場合は、1つのセレクタを次のように設定できます。

{フィルタ：なし;}

そしてもう一つのように：

{filter:grayscale(100%);}
1
wcb1

あなたの場合の主な問題はあなたがSVG構造を隠す<img>タグからsvgをインポートしているということです。

目的の効果を得るには、<svg>タグを<use>と一緒に使用する必要があります。それを機能させるには、SVGファイル<path id='myName'...>で使用したいパスにidを指定して、それらを<use xlink:href="#myName"/>タグから取得できるようにする必要があります。下の断片を試してみてください。

.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">
  <defs>
    <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">
            <use xlink:href="#home"/>
          </svg>
        </span>
  
    <span class="icon blue">
          <svg viewbox="0 0 100 100">
            <use xlink:href="#home"/>
          </svg>
        </span>

SVGを 外部ソース からロードしたい（そしてHTMLに埋め込んでいない）場合は、フラグメント#の前に任意のURLを置くことができます。また、通常はCSSへの塗りつぶしを指定しません。 SVG自体の中でfill:"currentColor"を使うことを検討するのが良いでしょう。対応する要素のCSSカラー値が代わりに使用されます。

1
Flavien Volken

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

enter image description here

Google Chrome66.0.3359.181（Build oficial）（64ビット）Linux

enter image description here

オペラ53.0.2907.37 Linux

enter image description here

0
Benjamin

これは古い質問ですが、最近、同じ問題に遭遇したため、サーバー側から解決しました。これはphp特有の答えですが、私は他の環境にも同様のものがあることを確信しています。 imgタグを使用する代わりに、get-goからsvgをsvgとしてレンダリングします。

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

ファイルをレンダリングすると、完全なインラインsvgが得られます。

0
nechemya ungar