Я работаю с элементом SVG, который должен выглядеть примерно такэто: (извините, что я должен опубликовать это как ссылку, а не как изображение, но как новый пользователь у меня не было разрешений на публикацию изображений)

Граница со скругленными углами посередине страницы, но там, где граница удаляется, когда нужно вставить верхний / нижний колонтитул. Указанный пользователем текст должен быть вставлен в верхний и нижний колонтитулы и в сам фрейм. Прямоугольник нарисован поверх другого фона (картинка, другой прямоугольник с цветом и т. Д.). Мне нужно найти способkeep Исходный фон, нарисуйте только части границы и поместите текст поверх исходного фона.

Я пришел с этим решением:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 620 1100" preserveAspectRatio="xMidYMid meet">
    <defs>
        <!--Define some texts-->
        <text id="text1" x="90" y="100" style="text-anchor:start;font-size:30px;">THIS IS MY HEADER</text>
        <text id="text2" x="525" y="1010" style="text-anchor:end;font-size:30px;">MY TEXT HERE</text>

        <mask id="Mask1">
            <!--draw the entire screen-->
            <rect x="0" y="0" width="620" height="1100" style="fill:white;" />
            <!--Mask out the two rectangles where text is to be placed-->
            <rect x="300" y="980" width="350" height="50" style="fill:black;" />
            <rect x="90" y="90" width="350" height="40" style="fill:black;" />
        </mask>
    </defs>

    <!--The original background (here a rect with a fill color, but could also be an image)-->      
    <rect x="0" y="0" width="620" height="1100" style="fill:#f0ffb6"/>
    <!--Draw the rectangle but applying the mask-->
    <rect x="100" y="100" rx="20" ry="20" width="420" height="900" mask="url(#Mask1)" style="fill:none;stroke:green;stroke-width:5"/>

    <!--Draw the text-->                
    <use xlink:href="#text1" fill="black" stroke="black" stroke-width="1" />
    <use xlink:href="#text2" fill="black" stroke="black" stroke-width="1" />

    <text x="200" y="200">This text goes into the border</text>
</svg>

Моя проблема сейчас заключается в том, что последние два rects в маске (прямоугольники гдеnot чтобы нарисовать границу) должна иметь статическую ширину. Если пользователь изменяет ширину текста, ему также необходимо рассчитать новый текст и обновить эти два прямоугольника.

Есть ли способ замаскировать блок точно такой же ширины, какtext сам и пропустить прямоугольники в маске. Или это единственный способ создания такой маски? Если кто-нибудь "там" У меня есть лучший и более интуитивно понятный способ достижения этой компоновки, и я был бы более чем заинтересован услышать ваше мнение.

Спасибо за вашу помощь.