Нарисуйте текст в SVG, но удалите фон

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

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

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


    
        
        THIS IS MY HEADER
        MY TEXT HERE

        
            
            
            
            
            
        
    

          
    
    
    

                    
    
    

    This text goes into the border

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

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

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

Ответы на вопрос(3)

Ваш ответ на вопрос