title: Draw text in SVG but remove background
body: <p>I'm working with an SVG element that should look something like <a href="http://royeven.dyndns.org/est.jpg">this: (sorry that I have to post this as a link instead of as a picture, but as a new user I didn't have permissions to post images)</a></p>
  
  <p>A border with rounded corners in the middle of a page, but where the the border is removed where header/footer is to be inserted. User-specified text is to be inserted into header, footer and into the frame itself. The rectangle is painted on top of another background (a picture, another rectangle with a color, etc.). I need to find a way to <em>keep</em> the original background, paint only parts of the border and place the text on top of the original background. </p>
  
  <p>I have come up with this solution:</p>
  
  <pre><code>&lt;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"&gt;
      &lt;defs&gt;
          &lt;!--Define some texts--&gt;
          &lt;text id="text1" x="90" y="100" style="text-anchor:start;font-size:30px;"&gt;THIS IS MY HEADER&lt;/text&gt;
          &lt;text id="text2" x="525" y="1010" style="text-anchor:end;font-size:30px;"&gt;MY TEXT HERE&lt;/text&gt;
  
          &lt;mask id="Mask1"&gt;
              &lt;!--draw the entire screen--&gt;
              &lt;rect x="0" y="0" width="620" height="1100" style="fill:white;" /&gt;
              &lt;!--Mask out the two rectangles where text is to be placed--&gt;
              &lt;rect x="300" y="980" width="350" height="50" style="fill:black;" /&gt;
              &lt;rect x="90" y="90" width="350" height="40" style="fill:black;" /&gt;
          &lt;/mask&gt;
      &lt;/defs&gt;
  
      &lt;!--The original background (here a rect with a fill color, but could also be an image)--&gt;      
      &lt;rect x="0" y="0" width="620" height="1100" style="fill:#f0ffb6"/&gt;
      &lt;!--Draw the rectangle but applying the mask--&gt;
      &lt;rect x="100" y="100" rx="20" ry="20" width="420" height="900" mask="url(#Mask1)" style="fill:none;stroke:green;stroke-width:5"/&gt;
  
      &lt;!--Draw the text--&gt;                
      &lt;use xlink:href="#text1" fill="black" stroke="black" stroke-width="1" /&gt;
      &lt;use xlink:href="#text2" fill="black" stroke="black" stroke-width="1" /&gt;
  
      &lt;text x="200" y="200"&gt;This text goes into the border&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>My problem now is that the last two rects in the mask (rectangles where <em>not</em> to draw the border) must have a static width. If the user changes the text width, the user also needs to calculate a new with of the text and update these two rectangles. </p>
  
  <p>Is there a way to mask out a block the exact same width as the <em>text</em> itself and skip the rectangles in the mask. Or is this the only way of creating such a mask? If anybody "out there" has a better and more intuitive way of achieving this layout, I'd be more than interested in hearing from you. </p>
  
  <p>Thanks for your help.</p>