SVG Filtres résultats dans les pièces étant coupé

Je ne suis pas sûr de la meilleure façon de décrire cela, mais je vais télécharger une image et vous pouvez voir par vous-même sur codepen. SVG Filtres résultats dans les pièces étant coupé

Le CSS:

.container{ 
    position: relative; 
    margin-top: 50%; 
    -webkit-filter: url("#goo"); 
    filter: url("#goo"); 
}

Le filtre SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
    <filter id="goo"> 
     <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" /> 
     <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -9" result="goo" /> 
     <feComposite in="SourceGraphic" in2="goo" operator="atop"/> 
    </filter> 
    </defs> 
</svg>

Fondamentalement, je suis en train d'utiliser des filtres SVG pour créer un effet "gluant" sur certains milieux. Il fonctionne à peu près comme prévu, sauf parfois et dans certains endroits, l'effet sera "cut-off".

Les endroits où cela se produit changent apparemment de manière aléatoire. J'ai essayé de reproduire cela dans Chrome, Firefox et Edge, et les résultats sont très incohérents.

Est-ce juste un cas de filtres SVG étant bogué? Ou est-ce que je les utilise mal?

Merci.

Source

2017-10-19 Manu

Normalement, lorsque cela se produit, c'est parce que la région du filtre n'est pas assez grande. Cependant je pense que c'est bien dans ce cas. Ça a l'air correct dans Firefox. Toutefois, il existe certains problèmes dans Chrome. Mais je pense que c'est juste un bug Chrome. –

Vous trouverez probablement que vous avez plus de chance si vous en faites une animation SVG uniquement, plutôt que d'essayer d'appliquer des filtres SVG aux éléments HTML. –

Les filtres SVG ont un filter effects region qui ne couvre pas toute la zone de dessin, mais seulement un peu au-delà de la zone de délimitation d'objet sur laquelle ils travaillent. Les valeurs par défaut que vous ne voyez pas sont 10% dans chaque direction:

<filter filterUnits="objectBoundingBox" 
     x="-10%" y="-10%" width="120%" height="120%">

Si cela ne suffit pas, choisissez des valeurs supérieures. Si vous préférez ne pas utiliser de pourcentages mais de valeurs de pixels, définissez filterUnits="userSpaceOnUse" et positionnez la zone d'effets à l'aide du système de coordonnées de l'objet filtré.

Source

2017-10-19 19:48:06 ccprog

C'était tout, merci! – Manu

SVG Filtres résultats dans les pièces étant coupé

Répondre

Questions connexes