Jak zmienić kolor ikony używanej jako slider-thumb (CSS)

Question

Modyfikuję slidera i udało mi się nawet zmienić ikonę (format svg), którą chwytamy do zmiany wartości (slider-thumb). Używana ikona jest czarna i chciałbym zmienić jej kolor na inny (w zależności od slidera, np. czerwony, niebieski).

To co do tej pory ogarnąłem w css:

input[type=range]::-webkit-slider-thumb 
{
    -webkit-appearance: none;
    width: 25px;
    height: 25px;    
    background: url('../img/shield.svg');    
    cursor: pointer;
}

Niestety nie mogę zmienić tego koloru poprzez background-color bo zmieni się tylko obramowanie czarnej ikony, a ona pozostaje (tak, zgadłeś) czarna. Czy jest to w ogóle możliwe?

Comments

Chesz zmienić jednorazowo, czy np. za każdym wyświetleniem?

Inkscape poradzi sobie z plikiem SVG.

---

Chciałem zmieniać kolor w różnych miejscach na stronie, więc z wyświetleniem. Zastanawiam się czy jest to możliwe w CSS, a jak nie w javascriptcie, czy jednak trzeba przygotować kilka wariantów kolorystycznych w oddzielnych plikach?

Answer 1

W sumie to nawet notatnik ci pomoże, plik svg to zwyczajny plik XML. Jak napisał niezalogowany, szukaj ciągu fill:#000000 lub fill="black" (lub podobnie, zapis oznacza kolor czarny) w pliku i zmień kod/nazwę koloru. Jeżeli ikona składa się z kilku części, ciąg może wystąpić kilka razy.

Program do obróbki grafiki wektorowej (np. darmowy Inkscape) poradzi sobie ze zmianą koloru.

Jeżeli chciałbyś zmieniać kolor kolor JEDNEJ ikony podczas pokazu slajdów, to musiałbyś edytować plik w trakcie działania aplikacji (np. przy pomocy PHP), ale lepiej przygotować kilka gotowych ikon. Chyba, że user sam może zmieniać kolor ikony.

Comments

Moje pliki nie mają ani fill, ani black, ani ciągu kilku zer. Inkscape daje radę by je zamienić. Zastanawia mnie czy istnieje sposób by zmieniać to przez CSS lub javascript? Od tego zależy czy przygotować muszę kilka wersji kolorystycznych w oddzielnych plikach, czy nie.

---

Przygotowane w innym programie. Otwórz je w Inkscapie i zapisz (będziesz miał fill).

Z tego co wiem, to ani CSS, ani JS ci na to nie poradzi. Brak możliwości edycji pliku, ale niech się wypowiedzą specjaliści. Z języków webowych, to, np. PHP - odczyt pliku, wyszukanie i zmiana frazy dotyczącej koloru, zapis pliku po zmianach. Ale IMO lepiej przygotować kilka wersji kolorystycznych, zwłaszcza, że waga plików jest śmieszna (jak to wektorowych).

Jeżeli - jak ci pisałem - user mógłby personalizować kolor ikon i wybierać przy tym kolor dowolny (nie z oferowanych gotowych od ciebie), to pozostaje edycja pliku.

Answer 2

Visual Studio Code

pobierz extension SVG PREVIEVER  zrestartuj edytor !

Otówrz wybrany svg w edytorze i zmień atrybut Fill na wybrany kolor w formacie #FFF;

Done jeśli SVG nie jest skomplikowany to powinno się spokojnie udać!

Answer 3

Może nie do końca w temacie, inne "spojrzenie" 

Change Color of SVG on Hover

CSS Style Generator for Range Inputs
SVG to Base64 

<input type="range" min="1" max="30" steps="1" value="2" class="slider">   
<input type="range" min="1" max="30" steps="1" value="2" class="slider c1">

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 20vw;
  height: 0.5em;
  background: #ccc;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  cursor: pointer;
  overflow: unset;
  border-radius: 10px;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: #4CAF50;
  cursor: pointer;
}

.c1::-webkit-slider-thumb 
{
  -webkit-appearance: none;
  width: 25px;
  height: 25px;    
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InJlZCIvPjwvc3ZnPg==");   
  cursor: pointer;
}