如何在<svg>中显示我的<span>

Question

  <div class="row justify-content-center">
    <div class="col-6 col-svg">
        <svg class="container-border" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
          <line class="container-top" x1="20%" y1="0"></line>
          <line class="container-top-red" x1="20%" x2="30%" y1="0"></line>
          <line class="container-left" x1="0" y1="100%"></line>
          <line class="container-right" x1="100%" y1="100%" x2="100%" y2="75%"></line>
          <line class="container-bottom" x1="0" x2="100%" y1="100%" y2="100%"></line>
        </svg>
        <span class="container-title">About Us</span>
    </div>
  </div>

这是我的HTML代码。

我想为div class =＆＃34; col-6＆＃34;创建一个边框。使用svg，之后我想在svg边框内找到一个标题。

但如果，我这样做，跨度出现在svg下... 我想我需要一些CSS代码来修复它

请帮帮我。