I am trying to make an "outer glow" filter for an svg path, so the resualting shape has a "glow".
The problem is, the path is semi transperent and I do not want the glow to be visible through the path. how do i take an outline of the sourceGraphic, "cut" it from the filter and then overlay the sourceGraphic back over the top.
Here is my path
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="w3.org/2000/svg" version="1.1">
<g
transform="translate(-6.011591,-2.5668894)"
id="layer1">
<path
id="path1023"
d="M 13.279347,9.9492382 24.624743,191.02179 191.62901,204.63627 349.1031,36.27056 Z"
style="fill:#96b200;fill-opacity:0.26666667;stroke:#ffff00;stroke-width:13.58376789;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:40.75130608, 40.75130608;stroke-dashoffset:0;stroke-opacity:0.67336683" />
</g>
</svg>
And here is the filter i have come up with so far:
<filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
<feComposite in="SourceAlpha" in2="SourceAlpha" operator="arithmetic" k1="0" k2="8" k3="-0.5" k4="-0.5" x="0%" y="0%" width="100%" height="100%" result="composite"/>
<feColorMatrix type="matrix" values="1 0 0 0 1
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0" x="0%" y="0%" width="100%" height="100%" in="composite" result="colormatrix1"/>
<feMorphology operator="dilate" radius="10 10" x="0%" y="0%" width="100%" height="100%" in="colormatrix1" result="morphology1"/>
<feGaussianBlur stdDeviation="10 10" x="0%" y="0%" width="100%" height="100%" in="morphology1" edgeMode="none" result="blur2"/>
<feMerge x="0%" y="0%" width="100%" height="100%" result="merge">
<feMergeNode in="blur2"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
Obliviously that makes the source path look awful and off colour, what i need is a way to use the feComposite as a "stencil" to cut out of feGaussianBlur the befor the feMerge, i just don't know how (or if its possible)
Figured it out. I needed to do a feComposite as follows:
<feComposite in="merge" in2="composite" operator="out" x="0%" y="0%" width="100%" height="100%" result="composite2"/>
This takes the solid shape created in the original composite and "cuts" or "excludes" it from the "glow", then I can just use the feMerge to place the sourceGraphic over the finished filter.
For completeness, here is my finished filter:
<filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
<feComposite in="SourceAlpha" in2="SourceAlpha" operator="arithmetic" k1="0" k2="8" k3="-0.5" k4="-0.5" x="0%" y="0%" width="100%" height="100%" result="composite"/>
<feColorMatrix type="matrix" values="1 0 0 0 1
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0" x="0%" y="0%" width="100%" height="100%" in="composite" result="colormatrix1"/>
<feMorphology operator="dilate" radius="10 10" x="0%" y="0%" width="100%" height="100%" in="colormatrix1" result="morphology1"/>
<feGaussianBlur stdDeviation="10 10" x="0%" y="0%" width="100%" height="100%" in="morphology1" edgeMode="none" result="blur2"/>
<feComposite in="blur2" in2="composite" operator="out" x="0%" y="0%" width="100%" height="100%" result="composite2"/>
<feMerge x="0%" y="0%" width="100%" height="100%" result="merge">
<feMergeNode in="composite2"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>