¿Es posible establecer sombra paralela para un elemento svg usando css3, algo así 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 uso de CSS solo? A continuación se muestra un código de trabajo donde el estilo del cursor se aplica correctamente, pero sin efecto de sombra. Por favor, ayúdame a obtener el efecto de sombra con el mínimo bit de código.
svg .shadow {
cursor:crosshair;
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
} <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>
html
css
svg
svg-filters
bsr
fuente
fuente
slopeatributo para ajustar cuánta opacidad desea.Use la
nuevafilterpropiedad CSS .Compatible con los navegadores webkit , Firefox 34+ y Edge .
Puede usar este polyfill que admitirá FF <34, IE6 +.
Lo usarías así:
Este enfoque difiere del
box-shadowefecto en que explica la opacidad y no aplica el efecto de sombra paralela al cuadro, sino a las esquinas del elemento svg.Tenga en cuenta : este enfoque solo funciona cuando la clase se coloca solo en el
<svg>elemento. NO puede usar esto en un elemento svg en línea como<rect>.Lea más sobre los filtros CSS en html5rocks .
fuente
Puede agregar fácilmente un efecto de sombra paralela a un elemento svg utilizando la función CSS drop-shadow () y los valores de color rgba. Mediante el uso de valores de color rgba, puede cambiar la opacidad de su sombra.
fuente
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.fuente
filter:url(#shadow)al elemento que desea tener una sombra (#shadowes la identificación de lafilteretiqueta). Por ejemplo<path d="..." style="filter:url(#shadow)"/>. Tal vez deberías agregar eso a tu respuesta.No conozco 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.
fuente
-webkit-filter: drop-shadow()es el camino a seguir seguro. Ver la respuesta de @hitautodestruct.Removed: Filter Effects This chapter is no longer part of the SVG specification!!Texto negro con sombra blanca
Otra forma, solía usar sombra blanca (en el texto): crear un clon para sombra:
Nota : Esto requiere
xmlns:xlink="http://www.w3.org/1999/xlink"en la declaración SVG.El valor del texto real se encuentra en una
<defs>sección, con posición y estilo, pero sin unafilldefinición.El texto se clona dos veces: primero para sombra y segundo para el texto en sí.
Más distanteSombra con mayor valor como desviación de desenfoque :
Puede usar este mismo enfoque con objetos SVG normales.
Con el mismo requisito: ¡ Sin definición de relleno en la
<defs>sección !fuente
flood-color?Blurse usa para hacer que la sombra se vea un poco borrosa. Vea mi segunda versión de textoMore distant shadow...(Recién agregado ahora)Probablemente una evolución, parece que los filtros CSS en línea funcionan bien en los elementos, de cierta manera.
Declarar un filtro CSS de sombra paralela, en un elemento svg, tanto en una clase como en línea NO funciona, como se especificó anteriormente.
Pero, al menos en Firefox, con la siguiente magia:
Agregar la declaración del filtro en línea , con javascript, después de la carga DOM .
fuente