Shadow for rect in svg - html

Question

I need to make a shadow for rect element for svg. The snippet below does the job, but I don't know how to control the color/opacity of the shadow? Any help will be appreciated!
<svg height="120" width="120">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />

Answer 1

Came across this w3schools page with similar examples. Based on the examples given there, it looks like you need to add few more filters (like feColorMatrix and feGaussianBlur) to bring the desired effect.
Your code with new filters:
<svg height="120" width="120">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="10" dy="10" />
<feColorMatrix result="matrixOut" in="offOut" 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" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
You can use this jsfiddle also.
Update:
We can achieve opacity & color change just with feColorMatrix filter. Check this updated jsFiddle.
But, in order achieve the desired color you need to understand more about setting values attribute of feColorMatrix.
Following links may be helpful:
Match colors in feColorMatrix filter
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix
SVG Drop Shadow - opacity, feOffset and viewBox difficulties