fill="currentColor" dla ikony svg

Question

Natrafiłem na problem z działaniem fill="currentColor" dla pewnej specyficznej ikony. 
Efekt poniższego przykładu powinien dawać czerwony kolor dla całej ikony (taki jak jest ustawiony w rodzicu). Tymczasem pozostaje ona ciągle czarna. Próbowałem modyfikować i usuwać właściwość stroke. Próbowałem wstawiać również do niej currentColor, ale ikona w ogóle nie reaguje. Proszę o pomoc. Może ktoś mierzył się już z takim problemem.

Dziękuję

<span style="color: red">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
  <path fill="currentColor" stroke="rgba(0, 0, 0, 1)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22" />
</svg>
Testowy napis
</span>

 

Comments

A próbowałeś?

<path stroke="red" ...>

 

Answer 1

Bo ta ikona nie ma wypełnienia, składa się z linii. A kolor linii określa atrybut [stroke], który masz ustawiony na czarny. Jeśli ustawisz [stroke] na currentColor, powinno zaskoczyć:

<span style="color: red">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
  <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22" />
</svg>
Testowy napis
</span>

 

Comments

BTW, jako ciekawostkę (uzupełnienie):

wartość currentColor można użyć zarówno w atrybucie fill, jak i stroke w kodzie SVG. currentColor jest to specjalna wartość, która oznacza kolor aktualnie ustawiony dla elementu SVG. Dzięki temu możesz ustawić kolor elementu SVG na taki sam, jak kolor tekstu lub innych elementów, które są w jego otoczeniu, bez konieczności ręcznego określania koloru dla każdego elementu osobno.

---

wartość currentColor można użyć zarówno w atrybucie fill, jak i stroke w kodzie SVG. currentColor jest to specjalna wartość, która oznacza kolor aktualnie ustawiony dla elementu SVG

Z tego co widzę, to currentColor można użyć praktycznie wszędzie tam, gdzie ustala się kolor - nie tylko w przypadku SVG. :)

---

działa, dziękuję