CSS/Bootstrap：如何使 Bootstrap Carousel 上的 SVG 中的文本具有响应性？

如何解决CSS/Bootstrap：如何使 Bootstrap Carousel 上的 SVG 中的文本具有响应性？

我有一个显示旅行图片的引导轮播，但第一张幻灯片是显示旅行名称的各种标题幻灯片。标题幻灯片是一个 SVG，文本在中心。我无法弄清楚如何使文本大小响应屏幕大小。我已经尝试按照 ViewBox 的说明进行操作，但它似乎对我不起作用。

这是我的代码：

{% if adv %}
    <div class = "container py-5">
<!--Carousel -->
        <div class="card mx-auto bg-dark" style="width:100%">
            <div id="picturecarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
                <div class="carousel-inner">
                    <div class="carousel-item active">                      
                        <svg width="100%" height="700px" viewBox="0 0 100 700"preserveAspectRatio="xMidYMid meet">
                            <text x="50%" y="50%" fill="#a6a6a6" dy=".3em" font-size="100" text-anchor="middle">{{adv.name}}</text>
                        </svg>      
                    </div>

                {% for entry in pics %}        
                    <div class="carousel-item">
                          <img src="{{entry.picture.url}}" class="d-block w-100 img-responsive img-shrink-700" alt="{{entry.picture_desc}}">
                    </div>
                {% endfor %}

                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#picturecarousel"  data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">PrevIoUs</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#picturecarousel"  data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
    
        </div>
</div>
{% endif %}

我的后端在 Django 中，因此是模板语言。

谢谢！