Bisakah saya mengubah warna isian lintasan svg dengan CSS?

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?

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.

jika Anda ingin mengubah warna dengan melayang di elemen, coba ini:

path:hover{
  fill:red;
}

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.

Anda meletakkan css ini untuk lingkaran svg.

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

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

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>

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

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.