Możemy łączyć list-style-image
z svg
s, które możemy wstawić w css ! Ta metoda zapewnia niesamowitą kontrolę nad „kulami”, które mogą stać się wszystkim.
Aby uzyskać czerwone kółko, użyj następującego css:
ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
Ale to dopiero początek. To pozwala nam robić dowolne szalone rzeczy z tymi kulami. okręgi lub prostokąty są łatwe, ale wszystko, co możesz narysować svg
, możesz tam umieścić! Sprawdź poniższy przykład w dziesiątkę:
ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>');
}
ul ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>');
}
ul ul ul ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}
<ul>
<li>
Big circles!
<ul>
<li>Big rectangles!</li>
<li>b
<ul>
<li>Small circles!</li>
<li>c
<ul>
<li>Small rectangles!</li>
<li>b</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>b</li>
</ul>
<ul class="bulls-eye">
<li>Bulls</li>
<li>eyes.</li>
</ul>
<ul class="multi-color">
<li>Multi</li>
<li>color</li>
</ul>
Atrybuty szerokości / wysokości
Niektóre przeglądarki wymagają ustawienia atrybutów width
i lub nic nie wyświetlają. W chwili pisania tego artykułu w najnowszych wersjach przeglądarki Firefox występuje ten problem. W przykładach ustawiłem oba atrybuty.height
<svg>
Kodowania
Niedawny komentarz przypomniał mi o kodowaniu danych uri. To był dla mnie ostatnio problem i mogę podzielić się kilkoma informacjami, które zbadałem.
Specyfikacja data-uri , która odwołuje się do specyfikacji URI , mówi, że svg powinien być zakodowany zgodnie ze specyfikacją URI . Oznacza to, że należy zakodować wszystkie rodzaje znaków, np . <
Staje się %3C
.
Niektóre źródła sugerują kodowanie base64, które powinno rozwiązać problemy z kodowaniem, jednak niepotrzebnie zwiększy rozmiar SVG, podczas gdy kodowanie URI nie. Polecam kodowanie URI.
Więcej informacji:
obsługa przeglądarki: > ie8
sztuczki css na svgs
mdn na svgs