Bisakah saya mengubah warna isian lintasan svg dengan CSS?


200

Saya memiliki kode berikut:

  <span>
     <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
        <desc></desc>
        <defs/>
        <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
      </svg>&nbsp;
  </span>

Apakah mungkin untuk mengubah warna isian lintasan SVG dengan CSS atau cara lain tanpa benar-benar mengubahnya di dalam tag path?



Saat ini, Anda dapat memasukkan dan menata file eksternal melalui <symbol>dan <use>. Lihat jawaban ini .
totymedli

Jawaban:


218

Ya, Anda bisa menerapkan CSS ke SVG, tetapi Anda harus mencocokkan elemen, seperti saat mendesain HTML. Jika Anda hanya ingin menerapkannya ke semua jalur SVG, Anda dapat menggunakan, misalnya:

path {
    fill: blue;
}​

CSS eksternal tampaknya menggantikan fillatribut jalur , setidaknya di browser berbasis WebKit dan Gecko yang saya uji. Tentu saja, jika Anda menulis, katakan, <path style="fill: green">maka itu akan menimpa CSS eksternal juga.


7
Apakah ini masih berfungsi dengan Chrome? Saya mengalami kesulitan mencoba mengubah warna jalur SVG saya dengan CSS.
Dallas Clark

5
Terima kasih Nicholas, saya yakin saya telah menemukan alasannya. SVG saya disematkan ke halaman melalui tag <img>, CSS tampaknya tidak dapat mengubah konten apa pun di dalamnya. Apakah ini benar?
Dallas Clark

40
Perlu diingat bahwa agar CSS dapat menata SVG, Anda harus memasukkan kode SVG di markup, itu tidak berfungsi jika Anda memasukkan SVG melalui <svg>tag.
Ricardo Zea

2
@RicardoZea Satu peringatan untuk itu: Anda dapat memasukkan objek dari file SVG eksternal dengan <use href="external.svg#objId" />dan CSS lokal Anda masih akan berlaku sampai batas tertentu.
Ken Bellows

1
@ KenBellows Itu benar, saya sudah mempelajarinya sekarang. Satu hal yang perlu diperhatikan adalah bahwa kita perlu menggunakan properti spesifik SVG di CSS jika tidak maka tidak akan berfungsi. Sebagai contoh, untuk mengubah warna latar belakang yang Anda gunakan fill: #000;bukan background: #000;.
Ricardo Zea


28

Jika Anda masuk ke kode sumber file SVG Anda dapat mengubah pengisian warna dengan memodifikasi properti fill.

<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg> 

Gunakan editor teks favorit Anda, buka file SVG dan mainkan.


2
Secara teknis benar berdasarkan kata-kata dari pertanyaan "... cara lain tanpa benar-benar mengubahnya di dalam tag path" dan bekerja persis seperti yang saya butuhkan. Dapatkan upvote!
Travis Watson

5
Bagaimana ini jawabannya? Pertanyaannya adalah pada CSS, bukan SVG asli
zhuhang.jasper

2
Apakah Anda punya jawaban untuk Tuan Jasper Anda sendiri?
Samuel Ramzan

2
Ini bukan jawaban. Ini adalah distorsi dari pertanyaan itu.
QMaster

16

Anda meletakkan css ini untuk lingkaran svg.

svg:hover circle{
    fill: #F6831D;
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 2;
}

8

Saya menemukan sumber daya yang luar biasa tentang trik-css: https://css-tricks.com/using-svg/

Ada beberapa solusi yang dijelaskan di sana.

Saya lebih suka yang membutuhkan suntingan minimal ke svg sumber, dan juga tidak memerlukannya untuk dimasukkan ke dalam dokumen html. Opsi ini menggunakan <object>tag.


Tambahkan file svg ke html Anda menggunakan <object>; Saya juga mendeklarasikan atribut html widthdan height. Menggunakan lebar ini dan ketinggian dokumen svg tidak diskalakan, saya mengatasinya dengan menggunakan transform: scale(...)pernyataan css untuk svgtag dalam file svg css terkait.

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>

Buat file css untuk dilampirkan ke dokumen svn Anda. Jalur svg sumber saya diskalakan ke 16px, saya meningkatkannya menjadi 64 dengan faktor empat. Itu hanya memiliki satu jalur jadi saya tidak perlu memilihnya secara lebih spesifik, namun jalur tersebut memiliki atribut isian jadi saya harus menggunakan !IMPORTANTuntuk memaksa css untuk mengambil preseden.

#svg2 {
    width: 64px; height: 64px;
    transform: scale(4);
}
path {
    fill: #333 !IMPORTANT;
}

Edit file svg target Anda, sebelum <svgtag pembuka , untuk memasukkan stylesheet; Perhatikan bahwa href relatif terhadap url file svg.

<?xml-stylesheet type="text/css" href="myfile.css" ?>

4

Anda dapat menggunakan sintaks ini tetapi akan membutuhkan beberapa perubahan pada file SVG. Dan hapus semua fill / stroke dari SVG itu sendiri.

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- use symbol instead of defs and g, 
  must add viewBox on symbol just copy yhe viewbox from the svg tag itself
  must add id on symbol
-->
<symbol id="location" viewBox="0 0 430.114 430.114">
  <!-- add all the icon's paths and shapes here -->
  <path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0   C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136   c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857   c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262   C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939   c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06   C270.138,174.729,244.833,199.193,214.245,199.193z"/>
</symbol>

icon.html

<svg><use xlink:href="file_path/location.svg#location"></use></svg>

"Hapus semua isian / goresan" - menghapus isian dan goresan bisa merusak svg (setidaknya milik saya, saat melakukan ini dalam ide saya dan menonton hasilnya di jendela pratinjau). Atau orang dapat menggunakancurrentColor
Frank Nocke

4

Dimungkinkan untuk mengubah warna isian jalur svg. Lihat di bawah untuk cuplikan CSS:

  1. Untuk menerapkan warna untuk semua jalur: svg > path{ fill: red }

  2. Untuk menerapkan jalur d pertama: svg > path:nth-of-type(1){ fill: green }

  3. Untuk menerapkan jalur d kedua: svg > path:nth-of-type(2){ fill: green}

  4. Untuk menerapkan jalur d berbeda, ubah hanya nomor jalur:
    svg > path:nth-of-type(${path_number}){ fill: green}

  5. Untuk mendukung CSS di Angular 2 hingga 8, gunakan konsep enkapsulasi:

:host::ng-deep svg path:nth-of-type(1){
        fill:red;
    }

2

Masukkan semua svg Anda:

fill="var(--svgcolor)"

Dalam Css:

:root {
  --svgcolor: tomato;
}

Untuk menggunakan pseudo-class:

span.github:hover {
  --svgcolor:aquamarine;
}

Penjelasan

root = halaman html.
--svgcolor = variabel.
span.github = memilih elemen span dengan github kelas, ikon svg di dalam dan menetapkan hover pseudo-class.


Selamat datang di StackOverflow, Neto. Ini sepertinya jawaban yang bagus. Terima kasih telah membantu.
srm
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.