Contrôler le style de 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>

Quelqu'un peut-il me dire comment contrôler la couleur du SVG en utilisant CSS ? J'ai essayé de faire cela avec différentes classes et identifiants, mais aucun d'entre eux ne semble avoir d'effet sur la couleur. Je peux changer la taille et la position mais pas la couleur. J'aimerais pouvoir utiliser un identifiant ou une classe distincte pour ce faire, plutôt que de changer la couleur du cercle et de la ligne séparément.

<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

Donner à une propriété partagée (comme le trait d'une ligne ou un cercle) la currentColor的值，然后您可以通过svg的color propriété (ou tout ancêtre ou propriété héritée) pour la contrôler :

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

(C'est ce que font Font Awesome et d'autres bibliothèques en coulisses. Ceci est également hérité si vous donnez height和width赋予em单位的值，您也可以通过后续的font-size pour le contrôler)