我有一个HTML页面，其结构如下：
<span class="svg-equation">
<svg xmlns="http://www.w3.org/2000/svg" height="17" width="32" wrs:baseline="13">
<text fill="#333333" font-family="Arial" font-size="12" text-anchor="middle" x="20.5" y="13.5">222</text>
</svg>
</span>
但是当我缩放页面时，svg会被缩放，但是跨度不会使svg的一部分看起来被裁剪。我希望跨度应该随着svg扩展，这样整个svg始终可见。我如何确保这一点？