1

Quiero aplicar sombra al contorno de una imagen vectorial escalable, también conocidos como SVG.

El atributo box-shadow de CSS no es una opción ya que aplica sombra al "borde cuadrado imaginario" de la imagen (primera imagen) y lo que realmente se requiere es la sombra de la figura misma (segunda imagen, hecha con gimp).

Tengo entendido que así como existe el fill para colorizar la imagen, debiera existir también algún tipo de efecto que permita aplicar la sombra al borde.

La imagen usada es el SVG de material icons ubicable aquí.

Gracias de antemano.

Aplicando box-shadow

Lo que realmente se busca

2 respuestas 2

4

1. filter:drop-shadow()

utilizar filter:drop-shadow para aplicar la sombra a una imagen con transparencias

.svgimg{filter:drop-shadow(1px 1px 3px #888)}
<img class="svgimg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat" />

2. filter:url()

Si quieres utilizar filtros svg puedes crear el filtro (#f) como el del siguiente ejemplo y utilizar filter:url(#f); para aplicarlo a tu imagen. El filter:url()permite aplicar todo tipo de filtros creados en SVG como por ejemplo el ya celebre goo (cosas pegajosas)

.svgfilterimg{ filter:url(#f);}
<img class="svgfilterimg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat" />

<svg width="0" height="0">
  <defs>
    <filter id="f" >
       <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="desenfoque"></feGaussianBlur>
       <feFlood flood-color="#888" />
       <feComposite in2="desenfoque" operator="in" />
       <feOffset dx="3" dy="3"></feOffset>
       <feMerge>
          <feMergeNode />
          <feMergeNode in="SourceGraphic" />
      </feMerge>  
    </filter>
  </defs>
 
</svg>

3. Elementos SVG

Si en lugar de una imagen quieres utilizar inline SVG, o sea pequeños elementos svg utilizados dentro del documento HTML puedes aplicar el filtro como atributo del elemento svg "filtrado": <rect ... filter="url(#f)"></rect>

<svg width="250" height="150">
<defs>
    <filter id="f" >
       <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="desenfoque"></feGaussianBlur>
       <feFlood flood-color="#888" />
       <feComposite in2="desenfoque" operator="in" />
       <feOffset dx="3" dy="3"></feOffset>
       <feMerge>
          <feMergeNode />
          <feMergeNode in="SourceGraphic" />
      </feMerge>  
    </filter>
</defs>
<rect x="75" y="25" height="100" width="100" stroke="#000" fill="#f00" filter="url(#f)"></rect>
</svg>

1

Agregas una clase al svg y aplicas la nueva propiedad 'filtro' de css. Espero ser de ayuda.

.shadow {
    -webkit-filter: drop-shadow( -5px -5px 5px #000 );//por ejemplo 
            filter: drop-shadow( -5px -5px 5px #000 );//por ejemplo 
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.