Применять тени как CSS3 эффект в Firefox

Question

Я работаю над проектом, который использует тень CSS3. Drop Shadow также применяется к изображению, имеющему альфа-пиксели. Он отлично работает в Chrome. Проблема возникает с Firefox. Я хочу альтернативное решение для этого. В настоящее время я использую SVG для рендеринга эффектов, похожих на тени, но это слишком тяжело и, кроме того, вызывает некоторые проблемы. Я хотел бы получить некоторые идеи для реализации той же функциональности в Firefox.

Пожалуйста, помогите. Благодарю.

Answer 1

Firefox реализует фильтр эффектов рабочего проекта <feDropShadow> элемент. Это оптимизировано, поэтому будет работать несколько быстрее, чем связывать все отдельные фильтры вместе.

Пример ниже показывает тень SVG 1.1 и новый <feDropShadow> эквивалент.

<svg viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="feDropShadowEquiv1">
        <feGaussianBlur stdDeviation="3"/>
        <feOffset dx="3" dy="3" result="offsetblur"/>
        <feFlood flood-color="#720"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
    <filter id="feDropShadow1">
        <feDropShadow stdDeviation="3" flood-color="#720"/>
    </filter>
  </defs>
  <g font-family="Verdana" font-size="30">
    <text x="100" y="90" filter="url(#feDropShadow1)">feDropShadow</text>
    <text x="100" y="140" filter="url(#feDropShadowEquiv1)" >feDropShadow</text>
  </g>
</svg>