‹SVG› Проблема с фильтром в Safari

Я искал предыдущий ответ на этот вопрос, но ни одно из решений, которые я нашел, не решает проблему.

Мой <path> с примененным к нему filter не отображается в Safari (я использую 11.0.2) или Firefox (57.0.4).

Вот мой код:

<!-- 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);
    }
}

Этот path с примененным к нему filter отображается в Chrome. Как только я удаляю ссылку на filter, появляется path со всеми примененными css.

Любая помощь будет высоко оценена.


svg safari firefox svg-filters
person DanMad    schedule 12.01.2018    source источник
comment
Вы пытаетесь выполнить слияние с несуществующим фильтрующим примитивом, называемым colorBlur. В этой ситуации браузеры должны использовать предыдущий примитивный результат. Хром явно есть. Возможно, Сафари нет. Просто предположение, т.   -  person Paul LeBeau    schedule 12.01.2018
comment
@PaulLeBeau: Вы предлагаете мне просто удалить этот <feMergeNode/>, и он должен работать? Потому что это не решило проблему. Он также удалил внешнее свечение из Chrome.   -  person DanMad    schedule 12.01.2018
comment
Не бери в голову. Я думаю, что нашел реальную проблему. Смотрите мой ответ.   -  person Paul LeBeau    schedule 12.01.2018

Ответы (1)


arrow_upward
1
arrow_downward

Нет такого ввода, как sourceAlpha. Правильное имя SourceAlpha.

В настоящее время я не могу протестировать Safari, но это устраняет проблему в 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>

person Paul LeBeau    schedule 12.01.2018
comment
Спасибо тебе за это. Я вижу, что мне не хватало атрибута result для <feComponentTransfer>. Единственная проблема, которая у меня есть, это то, что теперь path #glow темно? Он был того же цвета, что и stroke в Chrome. - person DanMad; 12.01.2018
comment
Я думаю, что это должна быть ошибка в Chrome. В спецификации SourceAlpha определяется как черный ввод с альфой исходной графики. Он не должен быть синим. Вам нужно перекрасить его. См. ответ с высоким баллом в этом вопросе: stackoverflow.com/ вопросы/7965196/svg-color-of-the-shadow - person Paul LeBeau; 12.01.2018
comment
С этим решением вам не понадобится шаг feComponentTransfer, который вы сейчас используете. - person Paul LeBeau; 12.01.2018
comment
На самом деле не баг. Chrome следует новому поведению SVG2 по умолчанию SourceGraphic для несуществующих входных имен. - person Paul LeBeau; 12.01.2018
comment
Спасибо @PaulLeBeau. Я нашел что-то полезное в ответе с меньшим количеством голосов — я поменял атрибут in на SourceGraphic в <feGaussianBlur> (см. мое предложенное редактирование). Ценю вашу помощь. Очень информативно. - person DanMad; 12.01.2018