SVG内发光(内阴影)、外发光(外阴影)、两边(阴影)(内外发光)

SVG内发光(内阴影)、外发光(外阴影)、两边(阴影)(内外发光)

参考

SVG内发光实现
SVG 阴影滤镜：内发光
SVG circles with inset-shadow
css-tricks.com/adding-shad…
Shadow Filters: Inner Glow
Creating inner shadow in svg
借助SVG滤镜实现CSS无法实现的阴影和模糊效果

基础

SVG feComposite operator
学习 canvas 的 globalCompositeOperation 做出的神奇效果
HTML canvas globalCompositeOperation 属性

两边发光

<filter id="filterId" height="150%" width="150%" x="-25%" y="-25%" filterUnits="userSpaceOnUse">
          <feMorphology operator="dilate" radius="3" in="SourceAlpha" result="thicken" />
          <feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
          <feFlood flood-color="#1f33a2" result="glowColor" />
          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
          <feMerge>
            <feMergeNode in="softGlowColored"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>

内发光

   <filter id="inset-shadow" height="150%" width="150%" x="-25%" y="-25%" filterUnits="userSpaceOnUse">
     <feFlood flood-color="#1f33a2" />
     <feComposite in2="SourceGraphic" operator="out" />
     <feGaussianBlur stdDeviation="3" result="blur" />
     <feComposite operator="atop" in2="SourceGraphic"/>

外发光

   <filter id="outset-shadow" height="150%" width="150%" x="-25%" y="-25%" filterUnits="userSpaceOnUse">
          <feMorphology operator="dilate" radius="3" in="SourceAlpha" result="thicken" />
          <feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
          <feFlood :flood-color="#1f33a2" result="glowColor" />
          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
           <feComposite in="softGlowColored" in2="SourceGraphic" operator="out" result="outSoftGlowColored" />
          <feMerge>
            <feMergeNode in="outSoftGlowColored"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>