Как я могу создать "свечение" вокруг прямоугольника с помощью svg?

У меня есть что-то вроде следующего:

<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>

Я хотел бы создать белое сияние вокруг этого.

Есть ли способ, которым я могу это сделать в svg. Я огляделся, и все, что я могу найти, это "тень", которая на самом деле не то, что я ищу, поскольку я хочу тень (Glow) вокруг всех четырех сторон прямоугольника.

Ответ 1

Вот несколько фильтров, которые обеспечивают различные типы эффектов:

Тень (прозрачная черная тень с небольшим смещением)
Черное свечение (с фиксированным цветом)
Цветное свечение (принимает цвет объекта, к которому он применяется)

Пример:

Здесь есть демонстрация.

Код:

<!-- 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 applied to -->
<filter id="glow">
    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

Ответ 2

Цветные матрицы не могут быть использованы для того, чтобы заставить вещи светиться другим цветом, только каким-либо образом преобразуйте существующий цвет.

Но мы можем сделать что-то подобное...

<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>

Смотрите эта сценария Я сделал на основе ответ Drew.

Здесь разбивка того, что делает фильтр:

Объедините заливку заливки с источником, чтобы покрасить его (feFlood и feComposite).
Немного развернуть этот цветной объект (feMorphology с помощью operator="dilate")
Примените наш старый добрый эффект размытия, чтобы он светился! (feGaussianBlur)
Придерживайтесь этого цветного, расширенного, светящегося объекта под источником (feMerge)

Ответ 3

Попробуйте следующее:

<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>

Я создал исходный фильтр в Inkscape, но он работает так же хорошо, как и при использовании.

Ответ 4

Если вы используете фильтр размытия, проявите осторожность. В частности, размытие может быть дорогостоящим с точки зрения ресурсов ЦП. Поэтому он также может потреблять батарею быстрее. Используйте инструмент (например, монитор активности OS X), чтобы наблюдать за эффектом, который имеют ваши фильтры, особенно если задействована анимация или видео.