SVG Overflow: None (Clip SVG Inside Div)

Question

如何将SVG剪辑到其容器中？我希望蓝色圆圈在红色矩形之外不可见(就像div的overflow:none;一样(。尽管在本例中，SVG是一个圆，但在我的例子中，它是一个复杂的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

正如@ccprog所提到的，向#svg_container添加一些属性。它移动了SVG，所以我更改了视图框，以证明剪辑是按需要进行的。

#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>