mdn - La sombra SVG cortó

tag g html 5

Question

El SVG con el que estoy trabajando tiene una sombra paralela a través del filtro feGaussianBlur.

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

Al igual que:

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 ocurrir consistentemente en Chrome (30), Firefox (25) y Opera (12).

Veo que no es una limitación de viewbox, ya que está configurado en 600x700.

También puedo ver en el inspector devtools el cuadro delimitador del elemento <ruta>, y es casi como si eso fuera lo que cortara la sombra:

Si ese es el caso:

1. ¿Por qué la sombra solo se corta verticalmente y no horizontalmente?
2. ¿Cómo evitarlo, para que no quede recortado así?

Si no es el cuadro delimitador, ¿qué causa esto y cómo evitar este recorte?

Answer 1

Como se indicó en un comentario anterior, la solución para mí era agregar un atributo a la etiqueta filter svg tag.

filterUnits="userSpaceOnUse"

Salida final:

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

Lo que hace que la sombra se ubique y se vea de forma absoluta fuera de su contenedor.

Answer 2

Necesita aumentar el tamaño de la región del filtro.

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

funciona bien Los valores predeterminados silenciosos para la región del filtro son: x = "- 10%" y = "- 10%" width = "120%" height = "120%" - las grandes imágenes borrosas generalmente se recortan. (Su sombra no se recorta horizontalmente porque su ancho es aproximadamente 2.5x su altura, de modo que el 10% da como resultado una región de filtro horizontal más ancha). Además, la región de filtro y parece calculada como si la ruta tuviera un trazo de cero píxeles, por lo que ignora el ancho de trazo. (Los diferentes navegadores tienen un comportamiento diferente si consideran que el trazo forma parte del cuadro delimitador a los fines del cálculo de la región del filtro).

(Actualización: moviendo hacia arriba las observaciones de los comentarios) Tenga en cuenta que si su forma particular es cero o cero (por ejemplo, una línea horizontal o vertical), debe especificar filterUnits="userSpaceOnUse" como parte de la declaración del filtro y especificar explícitamente una región de filtro (x, y, ancho alto) en userSpaceUnits (generalmente píxeles) que crea suficiente espacio para mostrar una sombra.

Answer 3

Si lo está utilizando dentro de un HTML, simplemente puede usar las propiedades de CSS para solucionar este problema.

svg {
  overflow: visible !important;
}

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

Un poco tarde, pero espero que sea útil.