如何在 SVG 元素中添加文本

Question

我想在一個元素內添加文本，這樣我的介紹就在一個矩形透明元素的后面。 我嘗試像這樣在 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>

但是我不能向后發送 object。 這甚至可能嗎？

有沒有更好的方法可以用來實現這個目標，而不是我嘗試使用的解決方案？

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>

或者你還有什么想做的嗎？ （請注意，即使文本位於橢圓形頂部，對比度也不是很好，仍然難以閱讀。）