SVG: color de la sombra

Quiero escribir un rectángulo simple con una sombra roja en SVG. Tengo un filtro simple:SVG: color de la sombra

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

¿Por qué en este ejemplo color de la sombra no es de color rojo? ¿Dónde está mi mal?

Fuente

2011-11-01 Oleg Ignatov

http://dev.opera.com/articles/view/svg-evolution-3-applying-polish/ ? page = 2 Puede superponer la imagen del filtro primitivo con la imagen real, para lograrla. Lo usé de esa manera. – Kris

Usted ha proporcionado un SVG no válido - necesita cerrar su elemento <rect>.
Su ejemplo (fijo) muestra una sombra roja en Chrome. Esto es lo que parece this URL para mí con Chrome v15:

¿Qué sistema operativo/navegador/versión está viendo resultados diferentes con?

Editar: En Firefox v7 veo toda la escala de grises, y en Safari v5 no veo el efecto de sombra en absoluto. Su respuesta, muy probablemente entonces, es simplemente que está probando en un navegador/versión con soporte incompleto de la especificación del filtro SVG.

Fuente

2011-11-01 21:30:02 Phrogz

Safari no admite filtros hasta la versión 6, consulte http://caniuse.com/#feat=svg-filters. –

Supongo que no produce rojo debido a http://www.w3.org/TR/SVG11/filters.html#SourceAlpha. SourceAlpha -> color negro implícito (# 000) + alfa. Funciona en Opera y Chrome si reemplaza 'in =" SourceAlpha "' con 'in =" SourceGraphic "'. –

El problema con Firefox es que solía tener un error que no procesaba un feFunc discreto con un único valor. Podría solucionarse utilizando dos valores, por ejemplo. tableValues = "1 1". Esto fue arreglado hace 18 meses. –

Para aquellos que buscan una solución general, esto funcionó para mí dentro de 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"/>

Fuente

2014-09-12 23:25:21

obtengo un buen resultado con esta feFlood y fecomposite – crapthings

Respuesta

Cuestiones relacionadas