Kolor CSS SVG
Przykład 1
Aby rozpocząć pisanie HTML, otwórz kod Visual Studio i utwórz nowy plik i wybierz HTML jako język. Plik został utworzony, a pozostaje tylko dołączenie „!”Zaznacz w tym pustym pliku, który jest tutaj utworzony, aby uzyskać podstawowe znaczniki. Po naciśnięciu „Enter” powoduje, że wszystkie podstawowe tagi HTML pojawiają się w pliku. Ciało to miejsce, w którym rozpoczynamy proces kodowania. Umieszczamy nagłówek i tag „SVG”. Ten znacznik „SVG” jest tutaj używany do definiowania pojemnika dla obrazu SVG. Umieszczamy „okrąg” wewnątrz znacznika „SVG” do tworzenia okręgu SVG. A następnie zamknij znacznik „SVG”. Teraz tworzymy plik CSS i rozpoczynamy kodowanie w pliku CSS, aby zastosować kolor do tego okręgu SVG. Łączymy również plik CSS z tym bieżącym plik HTML, wykorzystując znacznik „link” w „głowicy."
Oto kod CSS, w którym ustawiamy „szerokość” „SVG” jako „300px”, a „wysokość” tego „SVG” to „300px”. Używamy tutaj „udaru”, ponieważ kiedy musimy dodać trochę granicy do tego okręgu „SVG”. Ustawiamy wartość „udaru” jako „czerwony.„Ustawiamy również jego szerokość za pomocą„ szerokości skoku ”i ustawiamy tę„ szerokość udaru ”na„ 4px ”. Teraz zabarwiamy to koło SVG za pomocą „wypełnienia” właściwości CSS. Używamy tej właściwości „Wypełnij”, gdy mamy] do pokolorowania dowolnej grafiki SVG. Tutaj mamy okrąg SVG i dodajemy kolor do tego okręgu SVG, więc używamy właściwości „wypełnij”. Ustawiamy tę wartość właściwości „wypełnij” jako „żółty."
Możesz zobaczyć okrąg na wyjściu; Kolor tego okręgu SVG jest żółty, ponieważ dodaliśmy ten kolor za pomocą właściwości „wypełnienia” w CSS, a granica tego okręgu SVG jest w kolorze czerwonym, ponieważ użyliśmy właściwości „udar” w kodzie CSS.
Przykład 2
Tworzymy tutaj dwa prostokątne SVG, umieszczając „Div”, a wewnątrz tego „Div” mamy dwa różne „SVGS.„Używamy„ Rect ”do tworzenia prostokąta. Tutaj używamy dwóch prostych z nazwami „rect1” i „rect2” wewnątrz SVG, a następnie zamykaj tutaj „div”. Teraz zastosujemy różne kolory do tych prostokątnych SVG za pomocą właściwości CSS.
Dostosujemy wszystkie elementy „ciała” do „centrum.”Następnie stosujemy kolor„ czerwony ”do nagłówka i„ algierski ”, którego używamy jako„ Rodzina czcionki.„Stykujemy również ten nagłówek do„ Kursyki.„Wysokość” pierwszego „Rect1” SVG to „300px”, a „szerokość”, której tu używamy, to „500px”. „Wypełniamy” ten prostokąt „żółtym”, ponieważ jest to kształt SVG, więc używamy tutaj „wypełnienia”. Następnie ustawiamy tę samą wysokość i szerokość na następny prostokąt SVG i „wypełniamy” ten prostokąt „fioletem."
W wyjściu są dwa prostokąty SVG. Używamy właściwości CSS do barwienia tych prostokątów SVG. Oba prostokąty to SVGS.
Przykład 3
W tym kodzie tworzymy wielokąt SVG, więc używamy znacznika „SVG” i tworzymy tutaj „wielokąta”, definiując punkty wielokąta, a następnie zamykając znacznik „SVG”.
Używamy czcionki „algierskiej” i koloru „fioletowego” do nagłówka. Ustawiamy odpowiednio „SVG” i „Wysokość” jako „300px” i „200px”. Następnie używamy właściwości „wypełnij”. Ustawiliśmy ten „wypełnienie” na „różowy”, aby kolor wielokąta pojawił się „różowy.„Umieszczamy również granice tego wielokąta, więc używamy„ skoku ”, aby nadać kolor granicy, który ustalamy jako„ fioletowe.„Ustawiliśmy szerokość tej granicy, wykorzystując właściwość„ szerokość uderzenia ”i ustawiamy ją na„ 5 ”. Następnie używamy „wypełnienia”, która jest używana do określania wewnętrznej części wielokąta i ustawia ją na „Even-ODD."
Tutaj widzisz gwiazdę, która nazywa się również wielokątiem. Ten wielokąt jest wielokątem SVG, a my pokolorujemy ten wielokąt SVG tutaj w tym przykładzie za pomocą właściwości „wypełnienia”.
Przykład 4
Będziemy tutaj wygenerować trzy różne ikony, więc używamy znacznika „I” w tym pliku HTML. Podajemy różne nazwy każdej ikonie, więc; Przygotujemy inny kolor dla każdej ikony SVG.
Najpierw ustawiamy „ikonę”, „szerokość” i „wysokość” i oba są ustawione jako „100px”. Ustawiamy również te ikony w jednym wierszu, więc używamy właściwości „Wyświetl” i ustawiamy ją na „Block Inline.„Teraz, w„ Webkit-Mask ”, podajemy„ URL ”obrazu SVG i ustawiamy„ Webkit-Mask-Size ”na„ Okul.„Ponadto„ rozmiar maski ”to„ okładka ”tutaj. Następnie zastosujemy kolory do tych ikon SVG za pomocą właściwości „koloru w tle”. Ustawiliśmy „czerwony” dla pierwszej ikony SVG, „Pink” jako „kolor tła” dla drugiej ikony SVG i „żółty” kolor dla trzeciej ikony SVG.
Wszystkie trzy ikony SVGS pojawiają się w różnych kolorach, ponieważ ustawiamy te kolory w CSS, stosując właściwość koloru tła do wszystkich tych ikon osobno.
Przykład 5
Tutaj używamy wersji „XML”, a następnie podajemy tutaj ścieżkę ikony SVG, a następnie zmienimy kolor tej ikony na unoszeniu, a zostanie to zrobione w kodzie CSS.
Ustawiamy kolor tej ikony za pomocą właściwości „Wypełnij”, ponieważ jest to ikona SVG, więc dlatego używamy „wypełnienia” tutaj. Ustawiliśmy to „czarny.„Ta ikona pojawi się w kolorze czarnym. Używamy również „Wathe” z tą „ikoną” i ustawiamy „wypełnienie” „pomarańczowy”, więc kiedy unosimy myszę nad tą ikoną SVG, kolor tego zmieni się na „Orange”, jak ustawiliśmy tutaj „Orange” tutaj w „wypełnieniu” „Wisu.„Ustawia„ Wyliczenie tekstu ”na„ Center ”, a„ Wyściółka ”, którego tu używamy, to„ 2EM ”.
Pierwsze wyjście pokazuje przed unoszeniem się i można zauważyć, że kolor tej ikony SVG pojawia się w kolorze czarnym, który ustawiliśmy w kodzie CSS, ale po unośnieniu tej ikony SVG jego zmienia się i możesz to zobaczyć w następne wyjście.
W tym drugim wyjściu kolor ikon SVG renderuje „pomarańczowy”, ponieważ ustawiamy „pomarańczowy” jako „wypełnienie”, gdy unosimy się nad tą ikoną SVG w CSS.
Wniosek
Ten samouczek został stworzony, aby pomóc ci zrozumieć właściwości CSS, co pozwala nam pokolorować SVG. Ten samouczek obejmował tę koncepcję bardzo głębi. Przedstawiliśmy tutaj pięć różnych przykładów, w których projektujemy różne SVG, a następnie pokolorujemy te SVG, i zmieniliśmy kolor różnych ikon SVGS. W tym samouczku dostarczyliśmy wyniki wszystkich tych kodów. Wykorzystaliśmy tutaj dwie właściwości do zastosowania koloru do SVG, które były właściwości „wypełniające” i „kolory w tle”, i wyjaśniliśmy je szczegółowo tutaj. Po ostrożnym postępowaniu w tym samouczku mam nadzieję, że będziesz w stanie pokolorować SVGS, używając tych właściwości w CSS.