CODEWITHSUNDEEP
javascriptsvgsvg-filters
kobe
kobe

Reputation: 15835

SVG Filter with feBlend multiply not working on Chrome 46 for Windows

The following code stopped working all of sudden from last week. This works on all browsers expect chrome on windows. Did anybody else faced similar issue?

It is not updating the color, but it works on all other browsers and OS.

<filter id="sample-test" x="0" y="0" width="100%" height="100%">
      <feFlood flood-color="#d9251d" class="color-test" result="tint"></feFlood>
      <feBlend in="tint" in2="SourceGraphic" mode="multiply" result="multiply"></feBlend>
    </filter>

Upvotes: 0

Views: 429

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

This is a known new bug in Chrome 46 (#549440) which has just been fixed. the work around is: 

<filter id="sample-test" x="0" y="0" width="100%" height="100%">
      <feFlood flood-color="#d9251d" class="color-test" result="tint"></feFlood>
      <feComposite operator="arithmetic" in="tint" in2="SourceGraphic" k1="1" result="multiply"/>
    </filter>

Which uses the multiply capability of feComposite. This is apparently a different code path which is not broken.

Upvotes: 1

Related Questions