SVG Overflow: None (Clip SVG Inside Div)

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>