SVG: kolor cienia

Chcę napisać prosty prostokąt z czerwonym cieniem w SVG. mam prosty filtr:SVG: kolor cienia

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1012" height="400"> 
    <title>svg arrow with dropshadow</title> 
    <desc>An svg example of an arrow shape with a dropshadow filter applied. The dropshadow filter effect uses feGaussianBlur, feOffset and feMerge.</desc> 
    <defs> 
    <filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> 
    <feComponentTransfer in="SourceAlpha"> 
     <feFuncR type="discrete" tableValues="1"/> 
     <feFuncG type="discrete" tableValues="0"/> 
     <feFuncB type="discrete" tableValues="0"/> 
    </feComponentTransfer> 
    <feGaussianBlur stdDeviation="2"/> 
    <feOffset dx="0" dy="0" result="shadow"/> 
    <feComposite in="SourceGraphic" in2="shadow" operator="over"/> 
    </filter> 
    </defs> 
    <rect rx="2" ry="2" fill="rgb(255,255,255)" x="5.25" y="5.25" width="141" height="50" fill-opacity="0.85" filter="url(#dropshadow)"> 
</svg>

Dlaczego w tym przykładzie nie ma cienia kolor czerwony? Gdzie moje zło?

Źródło

2011-11-01 Oleg Ignatov

http://dev.opera.com/articles/view/svg-evolution-3-applying-polish/ ? page = 2 Możesz nałożyć pierwotny obraz filtra na rzeczywisty obraz, aby go osiągnąć. użyłem go w ten sposób. – Kris

Podałeś nieprawidłowy SVG - musisz zamknąć swój element <rect>.
Twój przykład (naprawiony) pokazuje dla mnie czerwony cień w Chrome. Oto co this URL wygląda dla mnie z Chrome V15:

Co OS/przeglądarka/wersja widzisz różne wyniki z?

Edycja: W przeglądarce Firefox v7 widzę wszystkie odcienie szarości, aw Safari v5 w ogóle nie widzę efektu cienia. Twoja odpowiedź, najprawdopodobniej, polega po prostu na tym, że testujesz w przeglądarce/wersji z niepełną obsługą specyfikacji filtra SVG.

Źródło

2011-11-01 21:30:02 Phrogz

Safari nie obsługuje filtrów do wersji 6, zobacz http://caniuse.com/#feat=svg-filters. –

Domyślam się, że nie wytwarza czerwonego z powodu http://www.w3.org/TR/SVG11/filters.html#SourceAlpha. SourceAlpha -> niejawny czarny kolor (# 000) + alfa. Działa w Operze i Chrome, jeśli zastąpisz 'in =" SourceAlpha "' with 'in =" SourceGraphic "'. –

Problem z Firefoksem polega na tym, że miał on błąd, który nie przetwarzałby dyskretnego feFunc z jedną wartością. Można go obejść przy użyciu dwóch wartości, np. tableValues = "1 1". Zostało to naprawione około 18 miesięcy temu. –

Dla tych, którzy szukają rozwiązania ogólnego, ten pracował dla mnie wewnątrz elementu:

<feGaussianBlur in="SourceAlpha" stdDeviation="1.7" result="blur"/> 
<feOffset in="blur" dx="3" dy="3" result="offsetBlur"/> 
<feFlood flood-color="#3D4574" flood-opacity="0.5" result="offsetColor"/> 
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>

Źródło

2014-09-12 23:25:21

Dostaję ładny wynik z tym feFlood i fecomposite – crapthings

Odpowiedz

Powiązane problemy