为什么 <textpath> 没有出现？答案

【问题标题】：Why is <textpath> not showing up?为什么 <textpath> 没有出现？
【发布时间】：2020-04-10 21:18:55
【问题描述】：

预期行为：

我正在尝试在多边形的帮助下编写 ABC，但没有显示任何内容。这是正确的做法吗？

  <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 84 96">
    <g id="ABC" transform="translate(-8.000000, -2.000000)">
      <g transform="translate(11.000000, 5.000000)">
        <text x="10" y="100" style={{ fill: '#64FFDA' }}>
          <textPath href="#Shape" fill="#64FFDA">
            ABC
          </textPath>
        </text>
        <polygon
          id="Shape"
          stroke="#64FFDA"
          strokeWidth="5"
          strokeLinecap="round"
          strokeLinejoin="round"
          fillOpacity="transparent"
          points="39 0 0 22 0 67 39 90 78 68 78 23"></polygon>
      </g>
    </g>
  </svg>

【问题讨论】：

xlinkhref 在 xlink 和 href 之间缺少一个 :
textPath 收到 href 而不是 xlinkhref。在此处查看示例：developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
另外 y="100" 离画布很远。
我尝试用href 替换，但仍然看不到任何文字。如果我使用xlink:href，它也会给我编译错误
如果您只想在多边形内写“ABC” - 为什么需要 textPath？你明白这有什么价值吗？

标签： svg polygon

【解决方案1】：

如果需要在多边形内放置字母，则需要将<text> 命令放在<polygon> 命令下方
注意 SVG 命令编写的语法。你需要stroke-width ="5" 而不是strokeWidth ="5"

<svg xmlns="http://www.w3.org/2000/svg" role="img" width="20%" height="20%" viewBox="0 0 84 96">
<g id="ABC" transform="translate(-8.000000, -2.000000)">
  <g transform="translate(11.000000, 5.000000)">
    
    <polygon
      id="Shape"
      stroke="#64FFDA"
      stroke-width="4"
      fill="#151515"
      points="39 0 0 22 0 67 39 90 78 68 78 23"></polygon>
  </g>
  <text x="50" y="55" font-size="22px" font-weight="500" font-family="sans-serif" fill="#64FFDA" text-anchor="middle" >ABC</text>
 </g>
</svg>

【讨论】：