如何在 SVG 元素中添加文本答案

【问题标题】：How to add text inside an SVG element如何在 SVG 元素中添加文本
【发布时间】：2020-08-06 07:34:16
【问题描述】：

我想在一个元素内添加文本，这样我的介绍就位于一个矩形透明元素的后面。我尝试在这样的 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>

但是我不能向后发送对象。这甚至可能吗？

有没有比我尝试使用的解决方案更好的方法来实现这个目标？

【问题讨论】：

“在这个背景后面”和“在一个矩形透明背景后面”是什么意思。这还不清楚。你的意思是“前面”吗？如果它在后面，它将不可见。您现在还在谈论按钮和其他 HTML。你的意思是你想要一个 SVG 文件作为一些 HTML 的背景（例如 <div>）？

标签： javascript html css svg frontend

【解决方案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>

或者你还有什么想做的吗？（请注意，即使文本位于椭圆形顶部，对比度也不是很好，仍然难以阅读。）

【讨论】：

是的，我如何添加整个介绍以及此背景后面的所有按钮（可能是矩形透明背景）我在包含按钮和介绍的 html 块之后打开和关闭了 svg 标记和全部 - 但这不起作用。我试图重新定位元素以降低到我想要在它上面的元素 - 这使我的 div 比我需要的要宽得多。我只是想弄清楚如何在我的介绍部分后面放置一个矩形对象。