css - 将文本放在 svg 多边形内

标签 css svg

我有一个三 Angular 形的多边形。但多边形内的文本未呈现。任何帮助表示赞赏。到目前为止,这是我尝试过的,我无法弄清楚为什么文本没有呈现。我真的可以在多边形内放置一个文本吗?

 <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>

提前致谢。

最佳答案

您的 SVG 有很多问题。

  1. points <polygon> 中的属性格式不正确。它缺少逗号。
  2. 你有一只流浪狗 <polygon>标记在该行的末尾。
  3. 您的 <text> 中没有文字元素。
  4. 文本的位置不在多边形之上。白色背景上的白色文本将是不可见的。
  5. 我还增加了 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>

关于css - 将文本放在 svg 多边形内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46699715/

相关文章:

css - 悬停时的大纲节点

SVG 路径 : LineTo path commands Multiple parameters

javascript - 为什么这个 SVG 图形只有在很大时才会让 Webkit 陷入困境?

svg - 不可见 SVG 元素上的工具提示

javascript - 动态图像加载到 svg

javascript - 如何借助 Menucool JS 插件创建 SVG 工具提示?

jquery - 使 bootstrap 均匀分布并正确对齐 div

css - 如何使用 css 更改 kendo ui datepicker 的背景颜色

javascript - 如何只点击模态外观而不点击对话框/内容?

css - Font-Awesome:试图让这个东西与 WordPress 一起工作