Как добавить текст внутри элемента SVG

Question

Я хотел бы добавить текст внутри элемента таким образом, чтобы мое вступление было за прямоугольным angular, прозрачным элементом. Я пытался добавить текст в SVG, как это

  <svg height="150" width="500">
    <text x="100" y="30" fill="red">I love SVG!</text>
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  </svg>

Однако я не могу отправить объект назад. Возможно ли это вообще?

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

Answer 1

Вы просто говорите о том, находится ли текст за овалом или поверх него?

Если это так, просто изменение порядка элементов исправляет следующее:

<svg height="150" width="500">
   <defs>
     <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
       <stop offset="0%" style="stop-color:rgb(255,255,255);
                                stop-opacity:0" />
       <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text x="100" y="30" fill="red">I love SVG!</text>
</svg>

Или Есть ли что-то еще, что вы пытаетесь сделать? (Обратите внимание, что даже если текст сверху овала, контраст не так уж велик, и его все равно трудно прочитать.)