SVG <textPath>не отображается (с ReactJS)

Question

Я не могу заставить мой <textPath> следовать моему SVG-пути.Я вижу в консоли, что это в 0x0, но я не могу изменить его.У меня также есть font-size: 4vw к моему #svg_text, поэтому я действительно не знаю, что происходит.

Вот мой код JavaScript:

return(
        <div key={i*3} id="svg_container">
        <svg
        viewBox="0 0 1532.82 818.45"
        id="svg">
          <path d="M1716,795.37C1392.31,283.32,716.07,130.88,204,454.54"
          transform="translate(-203.18 -283.05)"
          fill="transparent" stroke="#000"/>

          <text id="svg_text">
            <textPath xlinkHref="#curve">
              this is a test - this is a test
            </textPath>
          </text>
          </svg>
        </div>
      )
    }   })

---

Вот мой код CSS:

#svg_container{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

#svg {
  width: 80vw;
  height: 80vh;
}


#svg_text{
  font-size: 4vw;
  font-family: Dia-Bold;
  color: white;
}

Любая помощь будет принята с благодарностью.

Answer 1

Попробуйте это.Похоже, что textPath не поддерживается в React, поэтому вы можете

   const  textPath = `<textPath xlinkHref="#curve">
          this is a test - this is a test
        </textPath>`;

        <text id="svg_text" dangerouslySetInnerHTML={{__html: textPath }}></text>

добавить xmlns для svg и xlink в корневой элемент svg, как показано ниже

<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 1532.82 818.45" id="svg">