SVG <textPath> 未显示（使用 ReactJS）答案

【问题标题】：SVG <textPath> not showing up (with ReactJS)SVG <textPath> 未显示（使用 ReactJS）
【发布时间】：2018-10-12 12:32:43
【问题描述】：

我无法让我的<textPath> 跟随我的 SVG 路径。我在控制台中看到这个是 0x0 但我无法更改它。我的#svg_text 也有一个font-size: 4vw，所以我真的不知道发生了什么。

这是我的 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;
}

任何帮助将不胜感激。

【问题讨论】：

#curve 是在哪里定义的？将id 添加到您的<path> 后，它对我有用：jsfiddle.net/c1ghum60 VTC 是错字？
谢谢@Kaiido，这是错误。
如果它不能帮助您解决问题，请不要接受其他答案。这些由印刷错误引起的问题（我们都犯了这些问题）应该被删除，因为它们对未来的读者没有帮助。
我接受了另一个答案，因为您的代码不在线并且这也有效（尽管我不确定它的最佳实践）。但它也不是拼写错误，它也将id 添加到<path>。
不，他们的回答根本没有提到你犯的唯一错误，不，它也不起作用。如果您不接受这是一个错字，并且真诚地认为这可能会在将来对某人有所帮助（尽管您必须向我解释他们将如何偶然发现您的 Q/A），那么请自行回答，但无论如何，不要接受不能解决您问题的答案，这会向假设的未来读者发送错误信息（即使在这里，我怀疑会有很多）...

标签： javascript css reactjs svg

【解决方案1】：

试试这个。看起来 React 不支持 textPath 所以你可以做的是

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

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

在根 svg 元素处为 svg 和 xlink 添加 xmlns，如下所示

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

【讨论】：

谢谢，但这不是有效的 ReactJS 语法。我的控制台说：语法错误：不支持命名空间标签。 ReactJSX 不是 XML。
嘿，感谢您纠正我。我的错。看起来 React 中不支持 textPath 你能试试我更新的答案吗