I'm applying a simple filter on two paths and one of them doesn't render in Chrome.
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
<filter id="my_filter">
<feColorMatrix type="matrix" values="0.2 0 0 0 0, 0 0.2 0 0 0, 0 0 0.2 0 0, 0 0 0 1 0">
</feColorMatrix>
</filter>
<path id="path_one"
d="M50.57142857142857,14.549999999999997L354,14.549999999999997L354,14.549999999999997"
stroke="red"
fill="none"
filter="url(#my_filter)"/>
<path id="path_two"
d="M 10 10 H 90 V 90 H 10 L 10 10"
stroke="red"
fill="none"
filter="url(#my_filter)"/>
</svg>
Chrome 79.0.3945.88
Firefox 70.0.1
Safari 12.1.1
As you can see, path_one
doesn't render in Chrome. Any idea why?