Stylizacja skalowalnej grafiki wektorowej (SVG) za pomocą CSS
Dzisiaj zamierzamy kontynuować naszą dyskusję na temat skalowalnej grafiki wektorowej (SVG), a jak wskazaliśmy w naszym poprzednim poście, jedną z zalet korzystania z SVG jest to, że można go stylizować za pomocą CSS.
Właściwości stylizacji SVG
Stylizacja SVG działa zasadniczo tak samo, jak w zwykłych elementach HTML, w rzeczywistości dzielą też pewne wspólne właściwości. Istnieją jednak inne właściwości przeznaczone specjalnie dla obiektu SVG, które mają własną specyfikację oprócz CSS.
Na przykład, w zwykłym elemencie HTML możemy dodać kolor tła kolor tła lub tło Właściwość CSS. W SVG jest trochę inaczej; kolor tła jest określony za pomocą napełnić zamiast tego Również granica elementu jest określona za pomocą uderzenie nieruchomości i nie jest z granica tak jak w zwykłym HTML, możesz zobaczyć pełną listę tutaj.
Jeśli dość długo pracujesz z edytorem wektorów, takim jak Adobe Illustrator, możesz szybko domyślić się, że mechanizm nazewnictwa właściwości w SVG pochodzi od edytora.
Implementacja stylu SVG
Możemy użyć jednego z następujących sposobów na stylowanie elementu SVG;
Atrybuty prezentacji
Jeśli widziałeś wszystkie listy właściwości SVG, wszystkie mogą być dodane bezpośrednio do elementu, aby zmienić prezentację elementu. Poniższy przykład pokazuje, jak możemy dodać napełnić i uderzenie nieruchomość bezpośrednio na rect element;
Prostokąt okaże się podobny do poniższego zrzutu ekranu;
Wewnętrzny arkusz stylów
Możemy również dodać styl za pomocą styl atrybut. W poniższym przykładzie dodamy również napełnić i uderzenie do rect, ale tym razem dodamy go do styl i obróć go za pomocą CSS3 przekształcać własność, tak;.
Prostokąt obróci się w tym samym wyniku, tylko że jest teraz obrócony;
Wewnętrzny arkusz stylów
Osadź styl SVG w styl element jest również możliwy i nie różni się od tego, jak zrobiliśmy to w zwykłym HTML. Poniższy przykład pokazuje, w jaki sposób dodajemy wewnętrzne style wpływające na elementy SVG .html dokument.
Jednak SVG jest językiem opartym na XML, więc kiedy zamierzamy dodać wbudowany arkusz stylów w a .svg dokument, musimy umieścić deklarację stylów wewnątrz cdata, następująco;
The cdata tutaj jest wymagane, ponieważ CSS może mieć > znak, który będzie kolidował z parserami XML. Za pomocą cdata jest wysoce zalecany do osadzania stylu w SVG, nawet jeśli znak konfliktu nie jest podany w arkuszu stylów.
Zewnętrzny arkusz stylów
Zewnętrzny arkusz stylów działa również w ten sam sposób dla elementów SVG w .html dokument.
Znowu w .svg dokument, musimy odnieść zewnętrzny arkusz stylów jako xml-stylesheet, tak.
Grupowanie elementów
Elementy SVG można pogrupować za pomocą
Zarówno prostokąt, jak i okrąg będą miały ten sam rezultat.
Końcowa myśl
Przeszliśmy przez wszystkie istotne kwestie dotyczące stylizacji SVG za pomocą CSS i to tylko jedna z zalet obsługi grafiki za pomocą SVG. W następnym poście zajmiemy się kolejnym, więc bądźcie czujni.
- Wyświetl demo
- Pobierz źródło
