切断SVG的一半'；s文本元素

我怎么做这个

像这样

所以我想把文本元素减半。我不想将一半文本隐藏在SVG之外。将其隐藏在g之外是可以的，但尚未找到解决方案

<svg width="500" height="500">
 <g transform="translate(50,50)">
    <rect width="80" height="50" style="fill:rgb(0,0,255);"/>
    <text font-size="40" x="0" y="15" fill="black">SVG</text>
 </g>
</svg>

SVG

JSFIDDLE: 使用以下属性：

SVG

使用

元素而不是

，因为svg元素在默认情况下会剪裁其内容。overflow属性控制剪裁，即overflow=“visible”不剪裁，但overflow=“hidden”剪裁

SVG