Steuern Sie den SVG-Stil

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>

Kann mir jemand sagen, wie ich die Farbe von SVG mit CSS steuern kann? Ich habe versucht, dies mit verschiedenen Klassen und IDs zu tun, aber keine davon scheint einen Einfluss auf die Farbe zu haben. Ich kann die Größe und Position ändern, aber nicht die Farbe. Ich würde dazu gerne eine separate ID oder Klasse verwenden können, anstatt die Farbe des Kreises und der Linie separat zu ändern.

<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

给共享属性（例如线条和圆的描边）赋予currentColor的值，然后您可以通过svg的color属性（或任何祖先或继承的属性）来控制它：

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

（这是Font Awesome和其他库在幕后所做的。如果您给height和width赋予em单位的值，您也可以通过后续的font-size来控制它，这也是继承的）