0

I am working on a project which uses CSS3's drop-shadow. Drop Shadow is being applied to an Image having alpha pixels as well. It works fine in Chrome. Problem arises with firefox. I want an alternative solution to it. Currently I am using SVGs to render drop-shadow like effects but it is too heavy and moreover it is causing some issues. I'd like to get some ideas so as to implement same functionality in firefox.

Pls help. Thanks.

4

1 に答える 1

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>
于 2014-07-09T07:50:03.860 に答える