Ombre SVG coupé

Le SVG avec lequel je travaille a une ombre scope via le filtre feGaussianBlur.

L’ombre elle-même est affichée correctement, mais est coupée sur les bords supérieur et inférieur.

Ainsi:

image de l'ombre coupée

Le SVG en question est:

              

Le recadrage semble se produire régulièrement dans Chrome (30), Firefox (25) et Opera (12).

Je peux voir que ce n’est pas une limitation de la vue, car elle est définie sur 600×700.

Je peux également voir dans l’inspecteur devtools la boîte englobante de l’élément , et c’est presque comme si c’était ce qui coupait l’ombre:

boîte englobante

Si c’est le cas:

  1. Pourquoi l’ombre est-elle seulement coupée verticalement et non horizontalement?
  2. Comment contourner le problème, afin que cela ne soit pas coupé comme ça?

Si ce n’est pas la boîte englobante, quelle en est la cause et comment éviter cette coupure?

Vous devez augmenter la taille de la zone de filtrage.

  

fonctionne très bien. Les valeurs par défaut silencieuses pour la région de filtre sont: x = “- 10%” y = “- 10%” width = “120%” height = “120%” – les flous de grande taille sont généralement tronqués. (Votre ombre ne sera pas coupée horizontalement car votre largeur est d’environ 2,5 fois votre hauteur, de sorte que 10% entraînent une zone de filtrage horizontale plus large). De plus, la zone de filtre y semble être calculée comme si le tracé avait un trait de zéro pixel, donc il ignore la largeur du trait. (Différents navigateurs ont un comportement différent de savoir s’ils considèrent que le trait fait partie du cadre de sélection aux fins du calcul de la région de filtrage.)

(Mise à jour: remonter les observations des commentaires) Veuillez noter que si votre forme particulière est une largeur nulle ou une hauteur nulle (par exemple une ligne horizontale ou verticale), vous devez spécifier filterUnits="userSpaceOnUse" une zone de filtre (hauteur x, y, largeur) dans userSpaceUnits (généralement des pixels) qui crée suffisamment d’espace pour afficher une ombre.

Comme indiqué dans un commentaire ci-dessus, le correctif pour moi consistait à append un atsortingbut à la balise svg du filter shadow.

 filterUnits="userSpaceOnUse" 

Sortie finale:

  

Ce qui rend l’ombre parfaitement positionnée et visible à l’extérieur de son contenant.

Si vous l’utilisez dans un code HTML, vous pouvez simplement utiliser les propriétés CSS pour résoudre ce problème.

 svg { overflow: visible !important; } 

Je n’ai pas vérifié les autres navigateurs, mais le chrome a le overflow: hidden par défaut sur les balises svg.

Un peu tard, mais j’espère que c’est utile.