Почему <textpath>не появляется? - PullRequest
Новая
       15

Почему <textpath>не появляется?

1 голос
/ 11 апреля 2020

Ожидаемое поведение:

enter image description here

Я пытаюсь написать AB C в многоугольнике с помощью, но ничего не появляется. Это правильный способ сделать? 

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

1 Ответ

2 голосов
/ 11 апреля 2020

Если вам нужно поместить буквы внутри многоугольника, вам нужно поместить команду <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>
...