SVG sombra cortada

El SVG estoy trabajando tiene una sombra a través de feGaussianBlur filtro.

La sombra de sí mismo se muestra correctamente, pero se corta en los bordes superior e inferior.

Así:

SVG sombra cortada

El SVG en cuestión es:

<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg
  PUBLIC '-//W3C//DTD SVG 1.1//EN'
  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg height="600" version="1.1" width="700" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs/>
  <filter id="SVGID_0">
    <feGaussianBlur in="SourceGraphic" stdDeviation="6.6"/>
    <feOffset dx="0" dy="0"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  <path d="M 0 83 Q 0 83 0 83 Q 0 83 6 79.5 Q 12 76 17 71 Q 22 66 30.5 57.5 Q 39 49 54 36 Q 69 23 82.5 16.5 Q 96 10 120 4.5 Q 144 -1 170.5 0 Q 197 1 218 16.5 Q 239 32 253.5 51 Q 268 70 278 83.5 Q 288 97 299 110 Q 310 123 320 129.5 Q 330 136 338 136.5 Q 346 137 355 129.5 L 364 122" stroke-linecap="round" style="stroke: #005e7a; stroke-width: 30; fill: none; filter: url(#SVGID_0);" transform="translate(50 50)" />
</svg>

El recorte parece suceder de forma consistente en Chrome (30), Firefox (25), y la Ópera (12).

Puedo ver que no es un viewbox limitación, como se establece en 600×700.

También puedo ver en devtools inspector de la caja de contorno de <camino> elemento, y es casi como si eso es lo que corta la sombra:

SVG sombra cortada

Si ese es el caso:

  1. ¿Por qué la sombra sólo cortar verticalmente y no horizontalmente?
  2. Cómo trabajar alrededor de ella, para que no se recorta como este?

Si no el cuadro delimitador, lo que provoca esto y cómo evitar este recorte?

OriginalEl autor kangax | 2013-07-26

3 Kommentare

  1. 72

    Usted necesita para aumentar el tamaño del filtro de la región.

    <filter id="SVGID_0" y="-40%" height="180%">

    funciona bien. El silencio de los valores predeterminados para el filtro de la región son: x=»-10%» y=»-10%» width=»120%» height=»120%» – grandes desenfoques generalmente se recortan. (Tu sombra no está cortada horizontalmente debido a su anchura es de unos 2,5 x su altura, de modo que el 10% de los resultados en un contexto más amplio de filtro horizontal de la región). También, la y filtro de la región parece ser calculado como si el camino había un cero píxeles carrera, por lo que ignorar a la anchura del trazo. (Diferentes de los navegadores tienen un comportamiento diferente wrt, si consideran que el trazo ser parte del cuadro delimitador para los efectos de filtro de la región de cálculo.)

    (Actualización: el Movimiento de observaciones a partir de los comentarios)
    Por favor, tenga en cuenta que si su forma particular es cero anchura o altura cero (por ejemplo, una línea horizontal o vertical), entonces usted debe especificar filterUnits="userSpaceOnUse" como parte del filtro de declaración y especificar explícitamente un filtro región (x,y,anchura altura) en userSpaceUnits (generalmente de píxeles) que crea espacio suficiente para mostrar una sombra.

    Ah, muy interesante. No tenía ni idea sobre el filtro de la región, pero sí la ven en la especificación.
    ¿Cómo se establece el eje de atributo y altura-atributo del filtro si usted no sabe el tamaño de su sombra iba a ser de antemano? Usted sólo tiene que configurar esto en la marcha, o es posible decir «me gustaría que mi sombra que nunca se corta, no importa que tan grande es?»
    Así que usted puede crear un gran valor predeterminado área de sombra, pero que también va a tomar de la memoria. Muy grandes sombras son también muy costosa, así que mejor evitarlos.
    Usted puede hacer que el área de sombra, el tamaño de la viewBox mediante filterUnits="userSpaceOnUse" que esencialmente posición absolutamente (en el lienzo de la SVG). A continuación, puede especificar una posición de píxeles y el tamaño de la <filter id="drop_shadow" x="0" y="0" height="*svg-viewbox-height*" width="*svg-viewbox-width*" filterUnits="userSpaceOnUse">
    Nilloc – que te gustaría hacer los de x y de y negativos para que no clip de la izquierda y la parte superior de los bordes de la nebulosa. filterUnits cambios en el sistema de unidades, pero no cambia el 0,0 de las coordenadas – que es siempre en la parte superior izquierda del cuadro delimitador (aunque las fuentes de luz son tratados de manera diferente)

    OriginalEl autor Michael Mullany

  2. 5

    Como se dijo en un comentario anterior, la corrección para mí fue agregar un atributo a la filter sombra svg etiqueta.

    filterUnits="userSpaceOnUse"

    Resultado Final:

    <filter id="dropshadow" height="130%" width="130%" filterUnits="userSpaceOnUse">

    Que hace que la sombra absolutamente colocado y visible fuera de su contenedor.

    La adición de este sin añadir explícita las dimensiones de resultados en los no especificados de comportamiento y puede causar problemas de rendimiento, porque desdibuja (por ejemplo) puede ser calculado sobre la totalidad de la SVG superficie de dibujo. Si usted hace esto usted necesita para agregar explícita dimensiones.
    Es sólo en el x/y atributos que son necesarios?
    sólo la anchura y la altura

    OriginalEl autor Jack Nicholson

  3. 4

    Si la vas a usar dentro de un HTML, usted puede simplemente utilizar las propiedades CSS para solucionar este problema.

    svg {
      overflow: visible !important;
    }

    No he revisado otros navegadores, pero chrome tiene el overflow: hidden por defecto en svg etiquetas.

    Un poco tarde, pero espero que sea útil.

    Alguien votada abajo; hay una buena razón para no aplicar esta propiedad?
    La estoy usando en un proyecto y funciona muy bien. No sé si hay un caso específico en el cual no debería ser utilizado. En mi proyecto no podía encontrar una combinación de y y height que trabajó con Michael Mullany solución, así que tuve que implementar el que he descrito anteriormente.
    Thx, creo que es útil.
    Yo votada abajo. A veces el negatoscopio SVG se cortó una sombra, pero que no era el caso de esta pregunta. Pruebe su solución con el OP de código no funciona.
    No funciona en mi svg.

    OriginalEl autor Daniel Reina

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea