Chrome Version: 57.0.2987.110
OS: MacOS 10_12_3

Some user comments
(1) Using the css property mix-blend-mode: multiply does not consistently work on Chrome on macOS. I've created an example on codepen. When viewing the pen on macOS, the SVG on the left (using mix-blend-mode) is not blending the colors, although the SVG on the right works (using a svg feBlend filter). [56685995326-mix-blend-mode.png - Codepen Example]

(2) If you dynamically load an inline SVG via ajax (in my case using Angular) it breaks any elements within using the fill: url(#) property if you also alter the opacity of the element. Works fine in Firefox. Doesn't work in Safari. Have not tested in IE/Opera. [Stackoverflow]

(3) SVG doesn't render properly, when masking applied to path to mask the background of the text in the path, the path is not visible. This renders properly on Safari with 3 proper lines. The lines on the top and last are missing when mask is applied. [Attachment - test.svg.zip]

(4) SVG paths are rendered incorrectly.  It looks correct in other browsers such as Edge, Safari and Firefox. I have attached the html file. The screenshot is the one on the right. The green area of the wheel has ring that is rendered incorrectly. (fourth one from the outer ring) [Attachment - test.html.zip]

What happens instead?
Users notice that SVG does not render properly, such as:
1. SVG paths are rendered incorrectly
2. SVG formats are not displayed correctly

Test Cases - Attached
Some other reports : go/keeqy

External Links
http://stackoverflow.com/questions/43140737/svg-fill-urlfoo-disappears-when-svgs-are-loaded-dynamically
http://codepen.io/allenziegenfus/pen/RpOZPw - Works on Windows but not on MacOS
 

Deleted: 55677036497-test.html.zip 3.6 KB

55677036497-test.html.zip 3.6 KB Download

Deleted: 56256620816-test.svg.zip 1.2 KB

56256620816-test.svg.zip 1.2 KB Download

Deleted: 56685995326-mix-blend-mode.png.zip 101 KB

56685995326-mix-blend-mode.png.zip 101 KB Download