Chcę użyć tej techniki http://css-tricks.com/svg-fallbacks/ i zmienić kolor svg, ale jak dotąd nie byłem w stanie tego zrobić. Umieszczam to w css, ale mój obraz jest zawsze czarny, bez względu na wszystko. Mój kod:
.change-my-color {
fill: green;
}
<svg>
<image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>
Odpowiedzi:
W ten sposób nie można zmienić koloru obrazu. Jeśli załadujesz SVG jako obraz, nie możesz zmienić sposobu jego wyświetlania za pomocą CSS lub Javascript w przeglądarce.
Jeśli chcesz zmienić swój wizerunek SVG, trzeba załadować go za pomocą
<object>
,<iframe>
lub za pomocą<svg>
wbudowanej.Jeśli chcesz użyć technik na stronie, potrzebujesz biblioteki Modernizr, w której możesz sprawdzić obsługę SVG i warunkowo wyświetlić lub nie wyświetlać obrazu zastępczego. Następnie możesz wstawić plik SVG i zastosować potrzebne style.
Widzieć :
Pokaż fragment kodu
Możesz wstawić plik SVG, oznaczyć obraz zastępczy nazwą klasy (
my-svg-alternate
):A w CSS skorzystaj z
no-svg
klasy Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ), aby sprawdzić obsługę SVG. Jeśli nie ma obsługi SVG, blok SVG zostanie zignorowany i obraz zostanie wyświetlony, w przeciwnym razie obraz zostanie usunięty z drzewa DOM (display: none
):Następnie możesz zmienić kolor wstawionego elementu:
źródło
object
plików SVG z dokumentu hostingowego.Odpowiedź na 2020 r
Filtr CSS działa we wszystkich obecnych przeglądarkach
Aby zmienić dowolny kolor SVG
<img>
znacznika.Na przykład dane wyjściowe dla
#00EE00
tofilter
do tej klasy.źródło
brightness(0) saturate(100%)
na początku listy filtrów najpierw zmieni kolor na 100% czarny, co pozwoli innym filtrom zmienić go na właściwy kolor.Aby zmienić kolor dowolnego pliku SVG, możesz bezpośrednio zmienić kod svg, otwierając plik svg w dowolnym edytorze tekstu . Kod może wyglądać jak poniższy kod
Możesz zaobserwować, że istnieją pewne tagi XML, takie jak ścieżka, okrąg, wielokąt itp . Tam możesz dodać własny kolor za pomocą atrybutu stylu . Spójrz na poniższy przykład
Dodaj atrybut stylu do wszystkich tagów, aby uzyskać SVG wymaganego koloru
źródło
fill
tak:fill = "#AB7C94"
? Nie jestem pewien, dlaczegostyle
atrybut jest potrzebnyDodano stronę testową - do pokolorowania SVG poprzez ustawienia Filtru:
NA PRZYKŁAD
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)
Prześlij i pokoloruj swój plik SVG - Jsfiddle
Wziął pomysł od: https://blog.union.io/code/2017/08/10/img-svg-fill/
źródło
.custom-disabled > svg {filter:invert(0.2) sepia(1) saturte(0) hue-rotate(0);}
wykonałem właśnie tę pracę, której potrzebuję, aby wyłączyć ikonę.Tylko SVG z informacjami o ścieżce . nie możesz tego zrobić na obrazie. jako ścieżkę możesz zmienić obrys i wypełnić informacje i gotowe. jak Illustrator
więc: za pomocą CSS możesz zastąpić
fill
wartość ścieżkiale jeśli chcesz bardziej elastycznego sposobu, ponieważ chcesz go zmienić za pomocą tekstu, gdy efekt unosi się, użyj ...
źródło
najprostszym sposobem byłoby utworzenie czcionki z SVG za pomocą usługi takiej jak https://icomoon.io/app/#/select lub podobna . prześlij plik SVG, kliknij „generuj czcionkę”, dołącz pliki czcionek i css do swojej strony i po prostu używaj i stylizuj jak każdy inny tekst. Zawsze używam tego w ten sposób, ponieważ znacznie ułatwia stylizację.
EDYCJA: Jak wspomniano w artykule skomentowanym przez @ CodeMouse92 ikona czcionki zepsują czytniki ekranu (i prawdopodobnie są złe dla SEO). Raczej trzymaj się SVG.
źródło
Maska SVG na elemencie ramki z kolorem tła spowoduje:
Uwaga - maski SVG nie są obsługiwane w przeglądarkach Internet Explorer
źródło
Możesz zmienić kolorystykę SVG za pomocą css, jeśli używasz niektórych sztuczek. Napisałem do tego mały skrypt.
powyższy kod może nie działać poprawnie, zaimplementowałem to dla elementów z obrazem tła svg, który działa prawie podobnie do tego. Ale i tak musisz zmodyfikować ten skrypt, aby pasował do twojej sprawy. mam nadzieję, że to pomogło.
źródło
Skieruj ścieżkę w pliku svg:
Możesz robić inline, na przykład:
Lub
źródło
Aby po prostu zmienić kolor pliku svg:
Przejdź do pliku svg i pod stylami podaj kolor wypełnienia.
źródło
Jeśli chcesz to zrobić dla wbudowanego pliku svg, który jest na przykład obrazem tła w twoim css:
oczywiście zamień ... na wbudowany kod obrazu
źródło
Na przykład w kodzie HTML:
Użyj jQuery:
źródło
W rzeczywistości istnieje bardziej elastyczne rozwiązanie tego problemu: napisanie komponentu WWW, który załatuje SVG jako tekst w czasie wykonywania. Publikowane również w gist z linkiem do JSFiddle
źródło
najkrótszy sposób zgodny z Bootstrap, bez JavaScript:
i używaj go w następujący sposób:
źródło
Otwórz obraz za pomocą przeglądarki, kliknij obraz prawym przyciskiem myszy, kliknij źródło widoku strony, a zobaczysz tag svg obrazu. Poradzić sobie i wkleić do html, a następnie zmień wypełnienie na wybrany kolor
źródło
Po prostu dodaj fill: „pożądanyKolor” w znaczniku svg obrazu: przykład:
źródło