将文本放置在 svg 多边形内答案

【问题标题】：Place text inside of the svg polygon将文本放置在 svg 多边形内
【发布时间】：2017-10-12 00:52:49
【问题描述】：

我有一个三角形的多边形。但是多边形内部的文本没有渲染。任何帮助表示赞赏。这是我到目前为止所尝试的，我无法弄清楚为什么文本没有呈现。我真的可以在带有这样点的多边形内放置文本吗？

 <svg xmlns="http://www.w3.org/2000/svg"  width="25" height="25" viewBox="0 0 64 64">
<polygon fill="#F3BC23" stroke="#F3BC23" stroke-width="1" points="30,4 4,60 60,60"/><polygon>
<text x="10" y="14" text-anchor="middle" fill="white" font-size="10"></text>

提前致谢。

【问题讨论】：

标签： css svg

【解决方案1】：

您的 SVG 存在许多问题。

<polygon> 中的points 属性格式不正确。它缺少逗号。
您在该行末尾有一个杂散的<polygon> 标签。
<text> 元素中没有文本。
文本的位置不在多边形上方。白色背景上的白色文本将不可见。
我还增加了font-size 以便文本可见。

<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 64 64">
  <polygon fill="#F3BC23" stroke="#F3BC23" stroke-width="1" points="30,4,4,60,60,60"/>
  <text x="32" y="50" text-anchor="middle" fill="white" font-size="30">X</text>
</svg>

【讨论】：

【解决方案2】：

您可以使用<text>

这是你的代码

<svg>

<text x="10" y="10">text</text>

</svg>

【讨论】：