web-dev-qa-db-fra.com

Comment créer une "lueur" autour d'un rectangle avec svg?

J'ai quelque chose comme ce qui suit:

<svg id="svgLogo1" style="left:0; top:0; position:absolute"
        width="980" height="80" viewBox="0 0 980 80" 
        xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="5" width="980" height="54" rx="6" ry="6" 
            style="stroke-width:2; xstroke:#FFF; fill:#555"/>
</svg>

Je voudrais créer une lueur blanche autour de cela. 

Est-il possible de le faire en svg? J'ai regardé autour de moi et tout ce que je peux trouver est "ombre", ce qui n'est pas vraiment ce que je cherche car je veux une ombre (Glow) autour des quatre côtés du rectangle.

svgsvg-filters
22
Jessica

Voici quelques filtres qui fournissent différents types d’effet:

  • Ombre portée (ombre noire transparente avec un léger décalage)
  • Lueur noire (avec une couleur fixe)
  • Lueur d'objet coloré (prend la couleur de l'objet auquel il est appliqué)

Un exemple:

Il y a une démo ici .

Le code:

<!-- a transparent grey drop-shadow that blends with the background colour -->
<filter id="shadow" width="1.5" height="1.5" x="-.25" y="-.25">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/>
    <feColorMatrix result="bluralpha" type="matrix" values=
            "1 0 0 0   0
             0 1 0 0   0
             0 0 1 0   0
             0 0 0 0.4 0 "/>
    <feOffset in="bluralpha" dx="3" dy="3" result="offsetBlur"/>
    <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

<!-- a transparent grey glow with no offset -->
<filter id="black-glow">
    <feColorMatrix type="matrix" values=
                "0 0 0 0   0
                 0 0 0 0   0
                 0 0 0 0   0
                 0 0 0 0.7 0"/>
    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

<!-- a transparent glow that takes on the colour of the object it's applied to -->
<filter id="glow">
    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>
47
Drew Noakes

Les matrices de couleurs ne peuvent pas vraiment être utilisées pour rendre les choses plus brillantes, elles ne font que transformer la couleur existante d'une manière ou d'une autre.

Mais on peut faire quelque chose comme ça à la place ...

<filter id="white-glow">
    <feFlood result="flood" flood-color="#ffffff" flood-opacity="1"></feFlood>
    <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
    <feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
    <feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
    <feMerge>
        <feMergeNode in="blurred"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>

Voir ce violon j'ai fait, basé sur la réponse de Drew .

Voici une ventilation de ce que fait le filtre:

  • Associez un fond d’inondation à la source pour le colorier (feFlood et feComposite).
  • Développez un peu cet objet coloré (feMorphology avec operator="dilate")
  • Appliquez notre bon vieux effet de flou pour le faire briller! (feGaussianBlur)
  • Collez cet objet coloré, dilaté et luisant sous la source (feMerge)
12
Jack

Essaye ça:

<svg id="svgLogo1" style="left: 0px; top: 0px;
  position: absolute;" width="980" height="80" viewBox="0 0 980 80"
  xmlns="http://www.w3.org/2000/svg" version="1.1" >
    <defs>
        <filter id="dropGlow" width="1.5" height="1.5" x="-.25" y="-.25">
            <feGaussianBlur id="feGaussianBlur5384" in="SourceAlpha" stdDeviation="15.000000" result="blur"/>
            <feColorMatrix id="feColorMatrix5386" result="bluralpha" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 0.800000 0 "/>
            <feOffset id="feOffset5388" in="bluralpha" dx="0.000000" dy="0.000000" result="offsetBlur"/>
            <feMerge id="feMerge5390">
                <feMergeNode id="feMergeNode5392" in="offsetBlur"/>
                <feMergeNode id="feMergeNode5394" in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <rect x="0" y="5" width="980" height="54" rx="6" ry="6"
        style="stroke-width: 2; xstroke: #FFFFFF; fill: #555555; filter:url(#dropGlow)"/>
</svg>

J'ai créé le filtre d'origine dans Inkscape , mais cela fonctionne tout aussi bien dans tous les cas.

8
robertc

Si vous utilisez un filtre flou, faites preuve de prudence. Le flou en particulier peut être coûteux en termes de ressources CPU. Il peut donc consommer plus rapidement la batterie. Utilisez un outil (par exemple, le moniteur d'activité OS X) pour observer l'effet de vos filtres, notamment si une animation ou une vidéo est impliquée.

0
Marlin Ouverson