SVG: colore dell'ombra

Desidero scrivere un rettangolo semplice con un'ombra rossa in SVG. Ho un semplice filtro:SVG: colore dell'ombra

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

Perché in questo esempio il colore dell'ombra non è rosso? Dov'è il mio cattivo?

fonte

2011-11-01 Oleg Ignatov

http://dev.opera.com/articles/view/svg-evolution-3-applying-polish/ ? page = 2 È possibile sovrapporre l'immagine del filtro primitivo con l'immagine reale per ottenerla. l'ho usato in quel modo – Kris

Avete fornito SVG non valido - è necessario chiudere l'elemento <rect>.
L'esempio (corretto) mostra un'ombra rossa per me in Chrome. Ecco cosa this URL assomiglia per me con Chrome V15:

Che OS/browser/versione stai vedendo risultati diversi con?

Modifica: In Firefox v7 vedo tutto in scala di grigi e in Safari v5 non vedo affatto l'effetto ombra. La tua risposta, molto probabilmente, è semplicemente che stai provando in un browser/versione con supporto incompleto delle specifiche del filtro SVG.

fonte

2011-11-01 21:30:02 Phrogz

Safari non supportava i filtri fino alla versione 6, vedere http://caniuse.com/#feat=svg-filters. –

Suppongo che non produca rosso a causa di http://www.w3.org/TR/SVG11/filters.html#SourceAlpha. SourceAlpha -> colore nero implicito (# 000) + alfa. Funziona in Opera e Chrome se si sostituisce 'in =" SourceAlpha "' con 'in =" SourceGraphic "'. –

Il problema con Firefox è che aveva un bug in cui non avrebbe elaborato un feFunc discreto con un singolo valore. Potrebbe essere risolto usando due valori es. tableValues = "1 1". Questo è stato risolto circa 18 mesi fa. –

Per chi cerca una soluzione generale, questo ha funzionato per me all'interno di un elemento:

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

fonte

2014-09-12 23:25:21

ottengo un bel risultato con questo feFlood e fecomposito – crapthings

SVG: colore dell'ombra

risposta

Problemi correlati