CODEWITHSUNDEEP
firefoxsvgsafarisvg-filters
DanMad
DanMad

Reputation: 1735

<SVG> Filter issue with Safari

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.

Upvotes: 1

Views: 1434

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

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>

Upvotes: 1

Related Questions