Czy można ustawić cień dla elementu svg za pomocą css3, coś w rodzaju
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
Widziałem kilka uwag na temat tworzenia cienia za pomocą efektów filtrów. Czy istnieje przykład użycia samego css. Poniżej znajduje się działający kod, w którym styl cusor jest poprawnie zastosowany, ale bez efektu cienia. Pomóż mi uzyskać efekt cienia przy najmniejszej ilości kodu.
svg .shadow {
cursor:crosshair;
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 120 70">
<rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>
źródło
slope
atrybut, aby dostosować, ile chcesz krycia.Użyj
nowegoCSSfilter
właściwości .Obsługiwane przez przeglądarki internetowe , Firefox 34+ i Edge .
Możesz użyć tego wypełnienia które będzie obsługiwać FF <34, IE6 +.
Użyłbyś go w ten sposób:
To podejście różni się od
box-shadow
efektu tym, że uwzględnia krycie i nie stosuje efektu cienia do ramki, ale raczej do narożników samego elementu svg.Uwaga : To podejście działa tylko wtedy, gdy klasa jest umieszczana na samym
<svg>
elemencie. NIE możesz użyć tego w wbudowanym elemencie svg, takim jak<rect>
.Przeczytaj więcej o filtrach css na html5rocks .
źródło
Możesz łatwo dodać efekt cienia do elementu svg za pomocą funkcji CSS drop-shadow () i wartości kolorów rgba. Używając wartości kolorów rgba, możesz zmienić krycie cienia.
źródło
Najłatwiejszy sposób to znalazłem
feDropShadow
. Nigdy nie wrócę do używania tych niesamowicie ezoterycznych nazw tagów filtrów, których nie rozumiem.źródło
Nie znam rozwiązania tylko CSS.
Jak wspomniałeś, filtry są kanonicznym podejściem do tworzenia efektów cienia w SVG. Specyfikacja SVG zawiera przykład tego.
źródło
-webkit-filter: drop-shadow()
to droga na pewno. Zobacz odpowiedź @hitautodestruct.Removed: Filter Effects This chapter is no longer part of the SVG specification
!!Czarny tekst z białym cieniem
Innym sposobem był biały cień (na tekście): utwórz klon cienia:
Uwaga : Wymaga to
xmlns:xlink="http://www.w3.org/1999/xlink"
deklaracji SVG.Rzeczywista wartość tekstu znajduje się w
<defs>
sekcji, z pozycją i stylem, ale bezfill
definicji.Tekst jest klonowany dwa razy: pierwszy dla cienia i drugi dla samego tekstu.
Bardziej odległy cień o największej wartości jako odchylenie rozmycia :
Możesz zastosować to samo podejście do zwykłych obiektów SVG.
Z tym samym wymogiem: brak definicji wypełnienia w
<defs>
sekcji !źródło
flood-color
?Blur
służy do tego, aby cień wyglądał na nieco rozmazany. Zobacz moją drugą wersję tekstowąMore distant shadow...
(właśnie dodaną teraz)Prawdopodobnie ewolucja, wygląda na to, że wbudowane filtry css działają w pewien sposób na elementach.
Zadeklarowanie filtru css typu drop-shadow w elemencie svg, zarówno w klasie, jak i w wierszu, NIE działa, jak określono wcześniej.
Ale przynajmniej w Firefoksie z następującymi czarami:
Dołączanie deklaracji filtra w tekście , z javascript, po załadowaniu DOM .
źródło