SVG Overflow: None (Clip SVG Inside Div) - html

Question

How do I get the SVG to clip inside its container? I would like the blue circle not to be visible outside the red rectangle (like overflow:none; for divs). Although in this example, the SVG is a circle, in my case, it's a complicated SVG.
#text {border:1px solid green;}
#svg_container {height: 50px;border:1px solid red;}
svg {
position: absolute;
top: -40px;
left: -65px;
}
<div id="text">
The Lorem to the Ipsum is going to bing to the bang
</div>
<div id="svg_container">
<svg viewbox="-3 -3 9 9" width="180px">
<circle fill="darkblue" cx="3" cy="3" r="3" />
</svg>
</div>
<div id="more-text">
No dolor sit amet in this document, that's not what we're going for here. consectetur means consecutively.
</div>

Answer 1

As #ccprog mentions, add some properties to the #svg_container. It moves the SVG, so I changed the viewbox to demonstrate that the clipping is happening as desired.
#text {border:1px solid green;}
#svg_container {
height: 50px;
border:1px solid red;
position:relative;
overflow:hidden;
}
svg {
position: absolute;
top: -40px;
left: -65px;
}
<div id="text">
The Lorem to the Ipsum is going to bing to the bang
</div>
<div id="svg_container">
<svg viewbox="0 0 9 9" width="180px">
<circle fill="darkblue" cx="3" cy="3" r="3" />
</svg>
</div>
<div id="more-text">
No dolor sit amet in this document, that's not what we're going for here. consectetur means consecutively.
</div>