SVG: gölgenin rengi

SVG'de kırmızı bir gölgeyle basit bir dikdörtgen yazmak istiyorum.SVG: gölgenin rengi

<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>

Neden bu örnek gölge rengi kırmızı değil: ben basit bir filtre var? Benim kötü neredeyim?

kaynak

2011-11-01 Oleg Ignatov

http://dev.opera.com/articles/view/svg-evolution-3-applying-polish/ ? sayfa = 2 İlkel filtre görüntüsünü gerçek görüntü ile kapatarak bunu elde edebilirsiniz. Ben bu şekilde kullandım. – Kris

Geçersiz SVG sağladınız - <rect> öğenizi kapatmanız gerekiyor.
Örneğiniz (sabit) Chrome'da benim için kırmızı bir gölge gösterir. İşte this URL Krom v15 ile benim için şu şekilde görünür:

Ne OS/tarayıcı/sürüm

sizinle farklı sonuçlar görüyoruz?

Edit: Firefox'ta v7 Tüm gri tonlamayı görüyorum ve Safari'de v5 Gölge efektini hiç göremiyorum. Cevabınız, büyük ihtimalle, SVG filtre belirtiminin eksik desteğiyle bir tarayıcıda/versiyonda test etmenizdir. Genel bir çözüm arayanlar için

kaynak

2011-11-01 21:30:02 Phrogz

Safari, sürüm 6'ya kadar filtreleri desteklemiyordu, bkz. Http://caniuse.com/#feat=svg-filters. –

http://www.w3.org/TR/SVG11/filters.html#SourceAlpha nedeniyle kırmızı üretmediği varsayılıyor. SourceAlpha -> örtülü siyah renk (# 000) + alfa. 'In = "SourceAlpha" ile değiştirirseniz Opera ve Chrome'da çalışır; in = "SourceGraphic" '. –

Firefox'taki sorun, tek bir değere sahip ayrı bir feFunc işlemeyeceği bir hataya sahip olmasıdır. Örneğin, iki değer kullanılarak çalışılabilir. tableValues = "1 1". Bu yaklaşık 18 ay önce düzeltildi. –

, bu öğenin içinde benim için çalıştı:

<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"/>

kaynak

2014-09-12 23:25:21

Bu feFlood ve fecomposite ile güzel sonuç elde ederim – crapthings

cevap

İlgili konular