Draw the text in SVG but remove the background

Question

I work with an SVG element that should look something like this : this: (sorry I should post this as a link, not as a picture, but as a new user I did not have permission to send images)

A border with rounded corners in the middle of the page, but where the border is removed, where the header / footer should be inserted. Custom text must be inserted in the header and footer and in the frame itself. The rectangle is painted on top of another background (image, another rectangle with color, etc.). I need to find a way to keep the original background, draw only parts of the border and place the text on top of the original background.

I came up with this solution:

<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> 

My problem is that the last two rectangles in the mask (rectangles where not to draw a border) should have a static width. If the user changes the width of the text, the user also needs to calculate the new text and update these two rectangles.

Is there a way to mask a block of the same width as the text itself and skip rectangles in the mask. Or is this the only way to create such a mask? If someone out there has a better and more intuitive way to achieve this layout, I would be more than interested to hear from you.

Thanks for your help.

Answer 1

"Removing the background" of svg text without scripts can be done using svg filters.

For example:

 <filter x="0" y="0" width="1" height="1" id="removebackground"> <feFlood flood-color="blue"/> <feComposite in="SourceGraphic"/> </filter> 

What can be used in the text as follows:

 <use xlink:href="#text1" fill="black" filter="url(#removebackground)"/> 

This automatically adapts to the line width. If you need some addition, you can adjust the x, y, width, height attributes in the filter element.

Hmm, thinking about it again, this may not be what you exactly wanted. But you can adapt the above. Here is your file with this solution:

 <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> <filter x="0" y="0" width="1" height="1" id="removebackground"> <feFlood flood-color="black"/> </filter> <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--> <use xlink:href="#text1" filter="url(#removebackground)"/> <use xlink:href="#text2" filter="url(#removebackground)"/> </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> 

Answer 2

I believe that a simple way to influence this is to use the user's text as a brightness mask with a large set of stroke widths and a black stroke. Then place the text usually in a closed frame.

Answer 3

You can use SVG DOM. Calling getBBox on <use> elements will give you a bounding rectangle of text, and you can set mask rectangle sizes based on this. Providing rects identifier attributes allows you to reference them and set their sizes.

As an aside, I'm not sure why you draw text using <use> , and not directly using elements.