为什么 <textpath> 没有出现？

Question

预期行为：

我试图在的帮助下用多边形编写 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>

Answer 1

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

为什么 <textpath> 没有出现？

Why is <textpath> not showing up?

svg

polygon