Safari renders wrong colors when using blur filter

2019-06-25 23:26发布

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:

This is Safari

Chrome:

This is Chrome

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

1条回答
Root(大扎)
2楼-- · 2019-06-25 23:55

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">
查看更多
登录 后发表回答