Kawal gaya svg

Question

.search-bar svg {
  width: 25px;
  height: 25px;
  color: red;
}

.search-button svg {
  width: 25px;
  height: 25px;
  color: red;
}

<div class="search-bar">
  <form>
    <a class="search-button" type="submit">
      <svg class="svg-research" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                     <rect width="256" height="256" fill="none"/>
                     <circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                     <line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                  </svg>
    </a>
  </form>
</div>

Bolehkah sesiapa memberitahu saya cara mengawal warna svg menggunakan CSS? Saya telah cuba melakukan ini dengan kelas dan ID yang berbeza, tetapi tiada satu pun daripada mereka nampaknya mempunyai kesan pada warna. Saya boleh menukar saiz dan kedudukan tetapi bukan warna. Saya ingin dapat menggunakan ID atau kelas yang berasingan untuk melakukan ini, dan bukannya menukar warna bulatan dan garisan secara berasingan.

<div class="search-bar">
  <form>
    <a class="search-button" type="submit">
      <svg class="svg-research" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                     <rect width="256" height="256" fill="none"/>
                     <circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                     <line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                  </svg>
    </a>
  </form>
</div>

Answer 1

Berikan harta bersama (seperti goresan garis atau bulatan) harta currentColor的值，然后您可以通过svg的color (atau mana-mana nenek moyang atau harta warisan) untuk mengawalnya:

.search-button svg {
  width: 25px;
  height: 25px;
  color: red;
}
 .search-button svg line,.search-button svg circle{
   stroke: currentColor;
}

<div class="search-bar">
  <form>
    <a class="search-button" type="submit">
      <svg class="svg-research" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                     <rect width="256" height="256" fill="none"/>
                     <circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                     <line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                  </svg>
    </a>
  </form>
</div>

(Ini yang Font Awesome dan perpustakaan lain lakukan di belakang tabir. Ini juga diwarisi jika anda memberi height和width赋予em单位的值，您也可以通过后续的font-size untuk mengawalnya)