Bagaimana cara mengubah warna elemen svg?


352

Saya ingin menggunakan teknik ini http://css-tricks.com/svg-fallbacks/ dan mengubah warna svg tapi sejauh ini saya belum bisa melakukannya. Saya meletakkan ini di css tetapi gambar saya selalu hitam, tidak peduli apa. Kode saya:

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


Saya bukan ahli svg, tetapi apakah Anda sudah mencoba mengubah isian menjadi warna latar?
Meg

@Megan di svg background-color ditentukan dengan properti 'fill' dan perbatasan dengan 'stroke' (seperti yang akan Anda lakukan di Illustrator). w3.org/TR/SVG/propidx.html
Barbara

4
CSS dari dokumen HTML Anda tidak akan berlaku untuk elemen SVG dalam <img />
pawel

1
Ini mungkin sekarang. Jawaban sederhana dan fungsional di sini: stackoverflow.com/a/53336754/467240
mtyson

Jawaban:


189

Anda tidak dapat mengubah warna gambar seperti itu. Jika Anda memuat SVG sebagai gambar, Anda tidak bisa mengubah cara ditampilkan menggunakan CSS atau Javascript di browser.

Jika Anda ingin mengubah gambar SVG Anda, Anda harus memuatnya menggunakan <object>, <iframe>atau menggunakan <svg>inline.

Jika Anda ingin menggunakan teknik di halaman, Anda memerlukan pustaka Modernizr, di mana Anda dapat memeriksa dukungan SVG dan menampilkan secara kondisional atau tidak gambar fallback. Anda kemudian dapat sebaris SVG Anda dan menerapkan gaya yang Anda butuhkan.

Lihat :

Anda dapat menyejajarkan SVG Anda, menandai gambar mundur Anda dengan nama kelas ( 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" />

Dan dalam CSS gunakan no-svgkelas dari Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) untuk memeriksa dukungan SVG. Jika tidak ada dukungan SVG, blok SVG akan diabaikan dan gambar akan ditampilkan, jika tidak gambar akan dihapus dari pohon DOM ( display: none):

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

Kemudian Anda dapat mengubah warna elemen inline Anda:

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

5
Anda tidak dapat objectmendesain SVG tertanam dari dokumen hosting.
Javier Rey

1
@JavierRey Anda bisa menyuntikkan gaya ke konten tag objek melalui javascript. Tapi Anda benar bahwa itu tidak berlaku jika Anda hanya menambahkannya ke stylesheet dokumen hosting.
Robert Longson

2
Saya menggunakan solusi dari @ manish-menaria dan berfungsi dengan baik.
Ryan Ellis

1
Jawaban yang diterima harus diubah ke: stackoverflow.com/a/53336754/467240
mtyson

377

Jawaban 2020

Filter CSS berfungsi pada semua browser saat ini

Untuk mengubah warna SVG

  1. Tambahkan gambar SVG menggunakan <img>tag.
<img src="dotted-arrow.svg" class="filter-green"/>
  1. Untuk memfilter ke warna tertentu, gunakan Codepen berikut (Klik Di Sini untuk membuka codepen) untuk mengonversi kode warna hex ke filter CSS:

Misalnya, output untuk #00EE00is

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
  1. Tambahkan CSS filterke dalam kelas ini.
    .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }

5
Ini datang dengan peringatan biasa tentang tidak didukung dalam versi browser yang lebih lama: developer.mozilla.org/en-US/docs/Web/CSS/…
Kevin Wang

17
Seperti dicatat dalam CodePen, jika SVG Anda bukan hitam (milik saya berwarna abu-abu), menambahkan brightness(0) saturate(100%)ke awal daftar filter terlebih dahulu akan mengubahnya 100% hitam, yang memungkinkan filter lain untuk mengubahnya ke warna yang benar.
menyentak

2
Juga, banyak latar belakang yang menarik tentang solusi dalam pertanyaan StackOverflow ini yang memberi tahu CodePen.
Melompat

3
Teman saya Dukungan tersebut tampaknya dapat diterima caniuse.com/#feat=css-filters .
Sam Doidge

bekerja sangat baik, menggunakan codepen tidak terafiliasi ini untuk mendapatkan hex saya ke filter: codepen.io/sosuke/pen/Pjoqqp
WEBjuju

220

Untuk mengubah warna SVG apa pun, Anda dapat langsung mengubah kode svg dengan membuka file svg di editor teks apa pun . Kode tersebut mungkin terlihat seperti kode di bawah ini

<?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>

Anda dapat mengamati bahwa ada beberapa tag XML seperti jalur, lingkaran, poligon dll . Di sana Anda dapat menambahkan warna Anda sendiri dengan bantuan atribut gaya . Lihatlah contoh di bawah ini

<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"/>

Tambahkan atribut style ke semua tag sehingga Anda bisa mendapatkan SVG dari warna yang Anda butuhkan


48
Mengapa tidak menggunakan atribut fillseperti ini saja fill = "#AB7C94":? Tidak yakin mengapa styleatribut diperlukan
bg17aw

4
Hai Daniel, ya itu berhasil. Saya tidak tahu bahwa isian dapat digunakan sebagai atribut. Maaf karena tidak memperhatikan komentar Anda terlalu lama @ bg17aw
sushant047

30

Menambahkan halaman uji - untuk mewarnai SVG melalui pengaturan Filter:

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

Unggah & Warna SVG - Jsfiddle Anda

Mengambil ide dari: https://blog.union.io/code/2017/08/10/img-svg-fill/


1
Terima kasih, Anda hanya menyelamatkan saya dari diri saya sendiri. .custom-disabled > svg {filter:invert(0.2) sepia(1) saturte(0) hue-rotate(0);}melakukan pekerjaan yang saya butuhkan untuk menonaktifkan ikon.
roger

21

Hanya SVG dengan informasi jalur . Anda tidak dapat melakukan itu pada gambar .. sebagai jalur Anda dapat mengubah goresan dan mengisi informasi dan Anda selesai. seperti Illustrator

jadi: melalui CSS Anda dapat menimpa fillnilai jalur

path { fill: orange; }

tetapi jika Anda ingin cara yang lebih fleksibel karena Anda ingin mengubahnya dengan teks ketika memiliki beberapa efek melayang terjadi .. gunakan

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

cara termudah adalah membuat font dari SVG menggunakan layanan seperti https://icomoon.io/app/#/select atau semacamnya. unggah SVG Anda, klik "menghasilkan font", sertakan file font dan css ke sisi Anda dan cukup gunakan dan gaya itu seperti teks lainnya. Saya selalu menggunakannya seperti ini karena itu membuat styling jauh lebih mudah.

SUNTING: Seperti yang disebutkan dalam artikel yang dikomentari oleh ikon font @ CodeMouse92 mengacaukan pembaca layar (dan mungkin buruk untuk SEO). Jadi lebih tepatnya berpegang pada SVG.


5
Itu juga mengacaukan pembaca layar. Lihat "Maut ke Ikon Font" oleh Seren Davies
CodeMouse92

7

Topeng SVG pada elemen kotak dengan warna latar akan menghasilkan:

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


Catatan - Topeng SVG tidak didukung di browser Internet Explorer


1
Terima kasih banyak, @vsync ini hanya hack terbaik untuk apa yang saya butuhkan.
Vixson

6

Anda dapat mengubah pewarnaan SVG dengan css jika Anda menggunakan beberapa trik. Saya menulis naskah kecil untuk itu.

  • buka daftar elemen yang memiliki gambar svg
  • memuat file svg sebagai xml
  • hanya ambil bagian svg
  • ubah warna jalur
  • ganti src dengan svg yang dimodifikasi sebagai inline image
$('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')));
  });

});

kode di atas mungkin tidak berfungsi dengan benar, saya sudah menerapkan ini untuk elemen dengan gambar latar belakang svg yang bekerja hampir mirip dengan ini. Tapi bagaimanapun Anda harus memodifikasi skrip ini agar sesuai dengan kasus Anda. Semoga ini bisa membantu.


Omong-omong: Jika Anda adalah seorang pengembang RoR, Anda dapat menambahkan metode baru untuk precompiler sass yang dapat melakukan pekerjaan itu juga. Ini jauh lebih baik karena Anda akan memiliki encode base64, gambar berwarna yang benar dalam file css terkompilasi. Tidak perlu JS lagi! Mungkin saya bisa memberikan kode yang saya tulis, harus berbicara dengan CTO.
cydoc

2
+1 untuk memberikan solusi, daripada mengatakan itu tidak dapat dilakukan. Jawaban ini juga relevan: stackoverflow.com/questions/11978995/…
claytronicon

6

Targetkan jalur di dalam svg:

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

Anda dapat melakukan inline, seperti:

<path fill="#ccc">

Atau

svg{
   path{
        fill: #ccc


2

Jika Anda ingin melakukan ini pada svg inline yang, misalnya, gambar latar belakang di css Anda:

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

tentu saja, ganti ... dengan kode gambar sebaris Anda


2

Misalnya, dalam HTML Anda:

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

Gunakan jQuery:

$("#struct1").css("fill","<desired colour>");

Ini hanya berfungsi jika Anda memasukkan file SVG sebaris dalam HTML. Saya telah mengedit jawaban Anda untuk memperjelas ini.
Flimm

0

Sebenarnya, ada solusi yang lebih fleksibel untuk masalah ini: menulis Komponen Web yang akan menambal SVG sebagai teks dalam runtime. Juga diterbitkan di intisari dengan tautan ke JSFiddle

👍 filter: membalikkan (42%) sepia (93%) saturate (1352%) kecerahan rona (87deg) kecerahan (119%) kontras (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

Cara yang kompatibel dengan Bootstrap terpendek, tanpa 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;
}

dan gunakan seperti:

<td class="text-center">
    <div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>

-1

Buka gambar Anda menggunakan browser, klik kanan pada gambar klik pada sumber halaman lihat dan Anda akan melihat tag svg gambar. Atasi dan rekatkan ke html Anda, lalu ubah isi sesuai warna pilihan Anda


The jawaban yang diterima sudah menunjukkan sebaris dan kemudian menetapkan warna sebagai solusi.
Robert Longson

-1

Cukup tambahkan isi: "warna yang diinginkan" di tag svg gambar: contoh:

<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>

Pada dasarnya itu saran yang sama dengan jawaban ini
Robert Longson

jawaban-jawaban tersebut telah disebutkan mengisi tag path, itu bekerja untuk saya di tag svg, maka saya mempostingnya
Shivani
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.