1

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

Chrome 79.0.3945.88

Firefox 70.0.1

Firefox 70.0.1

Safari 12.1.1

Safari 12.1.1

As you can see, path_one doesn't render in Chrome. Any idea why?

jimousse
  • 37
  • 1
  • 8

0 Answers0