web-dev-qa-db-ja.com

SVG色を変更する

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>
csssvg
150
Barbara

そのように画像の色を変えることはできません。 SVGを画像としてロードした場合、ブラウザのCSSまたはJavascriptを使用して表示方法を変更することはできません。

SVGイメージを変更したい場合は、<object>、<iframe>、または<svg>インラインを使用してロードする必要があります。

このページのテクニックを使用したい場合は、Modernizrライブラリが必要です。ここでSVGサポートを確認し、条件付きでフォールバックイメージを表示するかどうかを指定できます。その後、SVGをインライン化して必要なスタイルを適用することができます。

見る ：

#time-3-icon {
   fill: green;
}

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}
<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" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
        C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
        C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
        c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
        c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>

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

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ではSVGサポートをチェックするためにModernizr（CDN： http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ）のno-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;
}
98
helderdarocha

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属性を追加してください。

132
sushant047

SVGの色を変えるために私が従うステップ：

  • まず、 img タグを使用してSVGイメージを追加します。
 <img src="dotted-arrow.svg" class="filter-green"/>

たとえば、 ＃00EE00 の出力は

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
  • 新しいクラスを作成し、このクラスにこのフィルタを追加します。
.filter-green{
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
  • これで、このクラスを画像タグに追加すると、SVGの色が提供されたHEXに変更されます。
68
Manish Menaria

テストページを追加しました - フィルタ設定でSVGを色付けします：

E.G filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

あなたのSVGをアップロード＆カラーリング - Jsfiddle

からアイデアを取った： https://blog.union.io/code/2017/08/10/img-svg-fill/

23
Yonatan Ayalon

最も簡単な方法は、 https://icomoon.io/app/#/select などのサービスを使用してSVGからフォントを作成することです。あなたのSVGをアップロードし、「フォントを生成する」をクリックし、あなたの側にフォントファイルとcssを含め、そして他のテキストのようにそれを使用してスタイルを設定します。スタイリングがずっと簡単になるので、私はいつもこのように使用します。

編集： @ CodeMouse92アイコンのフォントでコメントされている 記事 で説明しているように、スクリーンリーダーがめちゃくちゃになります（そしてSEOにはおそらく悪いでしょう）。 SVGに固執してください。

8
Felix Hagspiel

パス情報を持つSVGのみ 。あなたはそれを画像にすることはできません..あなたが打撃を変えて情報を埋めることができる道として..あなたは終わりました。 イラストレーターのように

だから：CSSを介してあなたはパスfill値を上書きすることができます

path { fill: orange; }

しかし、ホバリング効果が発生しているときにテキストで変更したいのでもっと柔軟な方法が欲しいのであれば.. use

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>
5
Biskrem Muhammad

あなたがいくつかのトリックを使うならば、あなたは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背景画像を持つ要素のためにこれを実装しました。しかし、とにかくあなたのケースに合うようにこのスクリプトを修正しなければなりません。お役に立てば幸いです。

5
cydoc

Svg内のパスをターゲットにします。

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

次のようにインラインで実行できます。

<path fill="#ccc">

または

svg{
   path{
        fill: #ccc
4
Michael Philips

Svgの色を単純に変えるには：

Svgファイルに行き、stylesの下に、塗りつぶしの色を書きます。

<style>.cls-1{fill:#FFFFFF;}</style>
3
Sethu Sathyan

SVG mask 背景色のボックス要素では：

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

.icon-bike{
  background: black;
  -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg);
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg);
}

.icon-bike:hover{
  background: green;
}
<i class="icon icon-bike" style="--size:150px"></i>
1
vsync

あなたがこれをインライン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");

もちろん、...をインライン画像コードに置き換えます。

1
Vision Hive

例えば：

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

JQueryを使用します。

$（ "＃struct1"）。css（ "fill"、 ""）;

0
Grv97