I suspect this may relate as SVG Mask makes line disappear but the above question is about masking, this one about filters, and the documentation in the above-given answer is removed - https://www.w3.org/TR/SVG/masking.html#Masking
I have a straight path:
<path stroke="red" stroke-width="40" fill="transparent" d="M400 -2800 H400 V-4400" filter=""></path>
And I am applying a filter defined like this:
<filter id="f1">
<feColorMatrix in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
The line will disappear.
I think it is due because objectBoundingBox won't be able to compute the width of a straight vertical line.
The effect I would like to obtain is to change the color of the lines on hover.
I know it could be done in CSS, but I would like to consider the possibility to be more flexible in applying effects.
How could I "flood" the color of the line/paths, and therefore the stroke of the computed geometry for the element, using filters?
In terms of performance, could you also suggest how could I use the browser console to check the impact of filters on rendering VS simply using CSS classes?
