Safari renders wrong colors when using blur filter

2019-06-25 23:38发布

问题:

I try to apply a blur filter to a svg elment, but it seems that Safari can't render the colors right. Here is an example of my problem:

<svg height="110" width="110">
    <defs>
          <filter id="f1" x="0" y="0">
               <feGaussianBlur stdDeviation="15" />
          </filter>
    </defs>
        <rect width="90" height="90"  stroke-width="3" fill="#ff4300" filter="url(#f1)" />
</svg>

http://jsfiddle.net/6gZ8t/1/

Safari:

Chrome:

The color is right in every brwoser expet Safari, where it is much brighter...Does anyone know a fix for this?

回答1:

Safari's default color interpolation (linearRGB) seems to be broken in recent updates. If you switch to sRGB across the board in your filters, you will get more correct results (although they'll all be gamma corrected).

<filter id="f1" x="0" y="0" color-interpolation-filters="sRGB">