Jak zmienić kolor elementu SVG?
Skalowalna grafika wektorowa, czasem znana jako SVG, jest dwuwymiarowym formatem obrazu wektorowego, którego można użyć do generowania animacji. Element SVG to kontener, który określa nowy układ współrzędnych. Ponadto format XML określa dokument SVG.
SVG jest odpowiedzialny za uczynienie animacji przeglądarki bardziej dostępnymi i przydatnymi we współczesnym świecie. Gry 2D mogą być tworzone w dokumencie HTML za pomocą pliku SVG. Zapewnia kilka sposobów tworzenia ścieżek, kręgów, prostokątów i innych form. Mówiąc dokładniej, oferuje zarządzanie wydarzeniami w dokumencie i jest niezależny od rozdzielczości.
Ten post wyjaśni metodę zmiany koloru elementu SVG.
Jak zmienić/zmodyfikować kolor elementu SVG?
Aby zmodyfikować kolor elementu SVG, dodaj „”Element, a następnie zdefiniuj ścieżkę za pomocą„" element. Następnie uzyskaj dostęp do tych elementów w CSS i zastosuj „wypełnić„Własność i ustawiaj”wyświetlacz".
Aby uzyskać praktyczność, postępuj zgodnie z poniższymi instrukcjami.
Krok 1: Wstaw element „”
Wstaw „„”Element i dodaj następujące atrybuty w„”Tag otwierający:
- "Wyświetlbox”To„svg”Właściwość wykorzystywana do skalowania elementu SVG do ustawienia współrzędnych, szerokości i wysokości.
- "XML: Space”Jest stosowany do elementu o wartości”utrzymywać”, Whitespace w treści tego elementu musi zostać zachowana tak, jak to jest przez aplikację, która ją przetwarza.
- "Szerokość i wysokość”Właściwości ustawiają rozmiar elementu w HTML.
- "Włącz wodę”Określa akumulację zarządzanego obrazu tła.
Krok 2: Dodaj ścieżkę
Wstaw „„" element. Następnie określ poniżej listy atrybutów:
- „„ID„Atrybut służy do jednoznacznej identyfikacji konkretnego elementu. Aby to zrobić, wartość atrybutu id jest ustawiona jako „Ikona"
- "D„Definiuje ścieżkę, którą należy narysować:
Wyjście
Krok 4: Zastosuj właściwość „wypełnij”
Uzyskaj dostęp do ścieżki za pomocą „#Ikona”I zastosuj CSS”wypełnić”Właściwość i ustaw wartość zgodnie z wyborem:
#IkonaWypełnij: RGB (18, 3, 230);
Krok 5: Ustaw „Wyświetl” elementu „SVG”
Teraz uzyskaj dostęp do SVG za pomocą nazwy klasy jako „.SVG-Alternate”:
.svg-alternateNie wyświetla się;
Następnie zastosuj „wyświetlacz„Właściwość wykorzystywana do określania zachowania wyświetlania elementu.
Krok 6: Element stylu „SVG”
Uzyskaj dostęp do obu „svg„Klasa po ich imieniu i zastosujcie nieruchomości:
.svg .svg-alternateBlok wyświetlacza;
szerokość: 150px;
Wysokość: 150px;
Tutaj:
- "wyświetlacz”Jest wykorzystywany do określania zachowania wyświetlania elementu.
- "szerokość" I "wysokość”Określa rozmiar elementu.
Wynikowy obraz pokazuje, że kolor obrazu SVG został pomyślnie zmieniony:
Chodzi o zmianę koloru elementu SVG.
Wniosek
Aby zmienić kolor elementu SVG, dodaj „”Element, a następnie zdefiniuj ścieżkę za pomocą„" element. Na koniec uzyskaj dostęp do tych elementów w CSS i zastosuj „wypełnić„Własność i ustawiaj”wyświetlacz". Ten post wykazał metodę zmiany koloru elementu SVG poprzez zastosowanie właściwości CSS.