Question

I have looked around for a previous answer to this issue, but none of the solutions I have found resolve the issue.

My <path> with a filter applied to it doesn't render in Safari (I'm running 11.0.2) or Firefox (57.0.4).

Here is my code:

<!-- html -->
<svg viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="sourceAlpha" stdDeviation="2"/>
            <feComponentTransfer>
                <feFuncA type="linear" slope=".21"/>
            </feComponentTransfer>
            <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <path d="M69.45584,18.54416a36,36,0,1,1-50.91168,0"/>
    <path d="M18.54416,18.54416a36,36,0,0,1,50.91168,0" filter="url(#glow)"/>
</svg>

/* css / scss */
path {
    fill: none;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    @include rem(stroke-width, 8); // 8px

    @include pseudo(nth-of-type(unquote('2n+1'))) {
        stroke: rgba(38, 38, 38, .03)
    }

    @include pseudo(nth-of-type(unquote('2n'))) {
        stroke: rgb(0, 131, 202);
    }
}

This path with the filter applied to it renders in Chrome. As soon as I remove the reference to the filter the path shows up with all css applied.

Any assistance would be much appreciated.

Your are trying to merge in a filter primitive called "coloredBlur", which doesn't exist. In this situarion, browsers are supposed to use the previous primitive result. Chrome obviously is. Perhaps Safari is not. Just a guess tho. — Paul LeBeau, Jan 12 '18 at 06:35
@PaulLeBeau: Are you suggesting I just remove that `` and it should work? Because that hasn't resolved the issue. It's also removed the outer glow from Chrome. — DanMad, Jan 12 '18 at 06:37
Never mind. I think I found the actual problem. See my answer. — Paul LeBeau, Jan 12 '18 at 06:44

Paul LeBeau · Accepted Answer · 2018-01-12T06:43:34.783

1

There is no such input as sourceAlpha. The correct name is SourceAlpha.

I can't currently test on Safari, but it fixes the problem in Firefox.

path {
  fill: none;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 8;
  stroke: rgba(38, 38, 38, .03);
  stroke: rgb(0, 131, 202);
}

path:nth-of-type(2n+1) {
  stroke: rgba(38, 38, 38, .03);
}

path:nth-of-type(2n) {
  stroke: rgb(0, 131, 202);
}

<svg viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
            <feComponentTransfer result="blur">
                <feFuncA type="linear" slope=".21"/>
            </feComponentTransfer>
             <feMerge>
                <feMergeNode in="blur"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <path d="M69.45584,18.54416a36,36,0,1,1-50.91168,0"/>
    <path d="M18.54416,18.54416a36,36,0,0,1,50.91168,0" filter="url(#glow)"/>
</svg>

edited Jan 12 '18 at 06:43

answered Jan 12 '18 at 06:28

Paul LeBeau

97,474
9
154
181

Thank you for this. I see I was missing the `result` attribute for ``. The only issue I have is that now the `path` `#glow` is dark? It was the same color as the `stroke` in Chrome. – DanMad Jan 12 '18 at 07:19
I think that must be a bug in Chrome. In the spec `SourceAlpha` is defined as a black input with the alpha of the original graphic. It shouldn't be blue. You need to recolour it. See the high score answer in this question: https://stackoverflow.com/questions/7965196/svg-color-of-the-shadow – Paul LeBeau Jan 12 '18 at 07:24
With that solution, you won't need the `feComponentTransfer` step you are currently using. – Paul LeBeau Jan 12 '18 at 07:25
Actually not a bug. Chrome is following the new SVG2 behaviour of defaulting to `SourceGraphic` for non-existent input names – Paul LeBeau Jan 12 '18 at 07:32
Thank you @PaulLeBeau. I found something helpful in the lower voted answer—I swapped the `in` attribute to `SourceGraphic` on the `` (see my suggested edit). Appreciate your help. Very informative. – DanMad Jan 12 '18 at 08:10

Filter issue with Safari

1 Answers1