title: How to add text inside an SVG element
body: <p>I would like to add text inside an element such that my intro is behind a rectangular, transparent element.
  <a href="https://i.stack.imgur.com/mW1OF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mW1OF.jpg" alt="enter image description here"></a>
  I tried adding text inside an SVG like this </p>
  
  <pre><code>  &lt;svg height="150" width="500"&gt;
      &lt;text x="100" y="30" fill="red"&gt;I love SVG!&lt;/text&gt;
    &lt;defs&gt;
      &lt;radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"&gt;
        &lt;stop offset="0%" style="stop-color:rgb(255,255,255);
        stop-opacity:0" /&gt;
        &lt;stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /&gt;
      &lt;/radialGradient&gt;
    &lt;/defs&gt;
    &lt;ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /&gt;
    &lt;/svg&gt;
  </code></pre>
  
  <p>However I can't Send the object backwards. Is this even possible?</p>
  
  <p>Is there a better approach I can use to meet this objective rather than the solution I'm trying to use? </p>