Jak dodać cień do elementu ścieżki SVG?

Próbowałem zastosować cień do mojej ścieżki SVG. Przeszukałem go przez opcję filter, która po zastosowaniu do ścieżki: -webkit-filter: drop-shadow(-5px -5px 10px #000);, która prawdopodobnie nie została zastosowana.Jak dodać cień do elementu ścieżki SVG?

Here's a fiddle with my SVG path demonstrating the problem

Źródło

2015-07-15 Louis93

Co masz na myśli przez "wyprofilowane"? Jak to ma wyglądać? –

Powiązany? - http://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3 –

Popędziłem to pytanie i napisałem 'box-shadow' zamiast' filter: drop-shadow'. To jest właściwa właściwość, którą wypróbowałem i która nie była stosowana @Paulie_D – Louis93

W swoim JSFiddle, Usunąłem swój CSS i dodaje definicję filtru. To wydaje się działać:

<svg width="100%" height="300px"> 
<defs> 
     <filter id="filter1" x="0" y="0"> 
      <feOffset result="offOut" in="SourceAlpha" dx="-5" dy="-5" /> 
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /> 
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> 
    </filter> 
</defs> 
<path stroke-linejoin="round" stroke-linecap="round" stroke="red" stroke-opacity="1" stroke-width="5" fill="none" class="leaflet-clickable" d="M1063 458L1055 428L1034 433L1030 421L1017 423L911 452L895 455L885 441L859 424L809 410L788 394L774 377L744 309L730 313L727 304L669 319L599 341L596 331L491 364L488 357L498 343L490 343L450 352L417 256L371 270L366 253L355 256L351 242L217 282L194 210L191 196L166 113L45 147L44 140L13 150" filter="url(#filter1)"></path> 
</svg>

może kilka poprawek do dx, dy, a wartości stdDeviation dostanie po prostu tak, jak chcesz.

Źródło

2015-07-15 15:14:30 cobaltduck

Czy można zmienić kolor cienia? – Richard

@Richard: To pytanie istnieje tutaj: http://stackoverflow.com/a/7973163/241291 – cobaltduck

Jak dodać cień do elementu ścieżki SVG?

Odpowiedz

Powiązane problemy