странное поведение / проблемы с позиционированием текста в SVG // IE проблемы

Question

Я как раз собираюсь расположить текст (заголовок) в SVG по вертикали И, чтобы IE также сохранял свою особую ширину .НО в IE этот заголовок сделан меньше и как-то забавно.Ну, теперь я прочитал о взломе paddin-bottom-hack, который я использовал сейчас .Вот мой исходный код:

h1 {
    display: flex;
    flex: 0 0 3em;
    min-height: 5em;        
    flex-direction: column;
    justify-content: center; 
    align-content:center;
    font-family: 'Variable-Bold';
    font-size: 1.6em; 
    line-height: 1; 
    letter-spacing:0;
    margin-right: 0.6em;
    max-width: 3.5em;
            border: 6px dotted yellow;
}
   .scaling-svg-container {
            position: relative; 

            width: 100%; 
            padding: 0;
            padding-bottom: 100%;
   }
h1 svg {
    display: inline-block;
    height: 100%; 
    max-height: 13em;
             position: absolute; 
             height: 100%; 
             width: 100%; 
            left: 0; 
            top: 0;
}

<h1 class="scaling-svg-container" 
                            style="padding-bottom: 24.0385%">
            <svg viewBox="0 0 50 208" preserveAspectRatio="xMidYMid meet"
                xmlns="http://www.w3.org/2000/svg">
                <path id="verticalPath" fill="none" stroke="none" d="M37.05,208 V0"/>
                <rect x=4 y=4 width=42 height=200 stroke-width="3" stroke="#ff6e00" fill="none"/>
                <text x="104.3" text-anchor="middle" fill="#ff6e00">
                    <textpath href="#verticalPath">Meine Überschrift</textpath>
                </text>
            </svg>
</h1>

В настоящее время в IE это выглядит так: ЭКРАН IE

Заголовок отображается в области с помощью (оранжевый) граница от середины (обозначена здесь желтой линией) к вершине!ПОЧЕМУ ЭТО НИЖЕ?Почему заголовок не отображается снизу вверх?Что не так здесь в исходном коде?И это только в IE!

Второй PROB) Во всех других браузерах заголовок с оранжевой рамкой теперь больше не отображается (по вертикали) по центру (в верхней желтой пунктирной области), дисплей сгибается;и flex-direction: столбец;justify-content: центр;выравнивание контента: центр;, все, что не работает сейчас, предположим, что имеет позицию: относительная;/ позиция: абсолютная;сделать.С какой опцией я могу теперь (в двух) направлениях (что просто получить контент-контент: центр; выровнять-контент: центр; получить) эту позицию заголовка (центра)?Как вы это делаете?

О, да: пример можно увидеть здесь Веб-сайт с визуальными ссылками

Можете ли вы мне помочь, пожалуйста?

Мизантроп