Как я могу создать «свечение» вокруг прямоугольника с помощью SVG? - PullRequest
Новая
       5

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

24 голосов
/ 09 марта 2012

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

<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. Я оглянулся вокруг, и все, что я могу найти, это «тень», которая на самом деле не то, что я ищу, потому что я хочу тень (свечение) вокруг всех четырех сторон прямоугольника.

Ответы [ 4 ]

49 голосов
/ 31 октября 2013

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

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

Пример:

image

There's a демо здесь .

код: 

<!-- 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>
12 голосов
/ 12 апреля 2016

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

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

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

См. эту скрипку Я сделал, основываясь на Ответ Дрю .

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

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

Попробуйте это: 

<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 , но он работает так же хорошо, как и к нему.

0 голосов
/ 12 ноября 2017

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

...