opacity vs fill-opacity in svg

Question

What is the difference in opacity vs fill-opacity in SVG?

I referred the docs for fill-opacity and opacity but I am confused what is meant by

Answer 1

fill-opacity controls the opacity for the fill color. opacity controls the opacity of the entire thing.

Take a look at this demo: https://jsfiddle.net/DerekL/9mvrL66g/