img - SVG drop shadow usando css3
filtros css w3schools (5)
¿Es posible establecer sombra paralela para un elemento svg usando css3, algo como
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
Vi algunos comentarios sobre la creación de sombras usando efectos de filtro. ¿Hay un ejemplo de usar css solo. A continuación se muestra un código de trabajo donde el estilo de cusor se aplica correctamente, pero sin efecto de sombra. Por favor, ayúdame a obtener el efecto de sombra con un poco de código.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css" media="screen">
svg .shadow { cursor:crosshair;
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888; }
</style>
</head>
<body>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 120 70">
<rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>
</body>
</html>
Aquí hay un example de cómo aplicar dropshadow a algunos svg usando la propiedad ''filter''. Si desea controlar la opacidad de la DropShadow, eche un vistazo a este ejemplo . El atributo de slope controla la cantidad de opacidad que se otorga a la sombra.
Bits relevantes del ejemplo:
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
<feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
<feComponentTransfer>
<feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
</feComponentTransfer>
<feMerge>
<feMergeNode/> <!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
<circle r="10" style="filter:url(#dropshadow)"/>
Box-shadow está definido para funcionar en cuadros CSS (leer: rectángulos), mientras que svg es un poco más expresivo que solo rectángulos. Lea el Manual de SVG para aprender un poco más sobre lo que puede hacer con los filtros SVG.
Entonces, como se mencionó en los comentarios ocultos de la respuesta aceptada por Lorenzo Polidori, la opción más fácil que funciona para mí en Chrome (y estoy seguro de que otros navegadores Webkit) es:
-webkit-svg-shadow: 0 0 7px #53BE12;
La forma más fácil que he encontrado es con feDropShadow . Nunca volveré a usar esos nombres de etiquetas de filtro increíblemente esotéricos que no entiendo.
<filter id="shadow" x="0" y="0" width="200%" height="200%">
<feDropShadow dx="40" dy="40" stdDeviation="35" flood-color="#ff0000" flood-opacity="1" />
</filter>
No tengo conocimiento de una solución solo para CSS.
Como mencionó, los filtros son el enfoque canónico para crear efectos de sombra paralela en SVG. La especificación SVG incluye un ejemplo de esto: http://www.w3.org/TR/SVG/filters.html#AnExample
Utilice la nueva propiedad de filter CSS.
Compatible con los navegadores webkit , Firefox 34+ y Edge .
Puede usar este polyfill que admita FF <34, IE6 +.
Lo usarías así:
.shadow {
/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
-webkit-filter: drop-shadow( -5px -5px 5px #000 );
filter: drop-shadow( -5px -5px 5px #000 );
}
Y tu html sería:
<img src="my-svg-graphic.svg" class="shadow">
<!-- Or -->
<svg class="shadow" ... >
<rect x="10" y="10" width="100" height="50" fill="#c66" />
</svg>
Este enfoque difiere del efecto de box-shadow en que da cuenta de la opacidad y no aplica el efecto de sombra al cuadro, sino a las esquinas del propio elemento svg.
Puedes ver un ejemplo en vivo aquí .
Tenga en cuenta : este enfoque solo funciona cuando la clase se coloca en el elemento <svg> solo. NO puede usar esto en un elemento svg en línea como <rect> .
<!-- This will NOT work! -->
<svg><rect class="shadow" ... /></svg>
Lea más sobre los filtros de css en html5rocks .