Reactjs 从输入值创建svg路径

是否有机会创建路径等于转换输入值的svg元素

大致任务如下。用户在输入中输入值，然后输入的值将转换为svg路径并发送到后端。输入的值应对字体更改敏感，但这将在稍后阶段进行

输入：动词
输出：

类Hello扩展了React.Component{
状态={
价值观：“嗨”
};
handleInputEvent=e=>{
e、 预防默认值（）；
这是我的国家({
价值：即目标价值，
})
}
handleSubmit=e=>{
e、 预防默认值（）；
警报（“从输入值创建svg”）；
}
render（）{
返回(
提交
{this.state.value}
);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

编辑：

在您的情况下，您希望将每个字母映射到预定义的SVG，这是一个可能的解决方案示例：

const SVG_LETTERS = {
  a: <svg .../>,
  A: <svg .../>
};

class Hello extends React.Component {
  state = {
    value: 'hi'
  };

  handleInputEvent = e => {...};

  handleSubmit = e => {...};

  render() {
    const { value } = this.state;
    return (
      <div>
        ...

        {[...value].map(char => SVG_LETTERS[char])}
      </div>
    );
  }
}

---

默认情况下，在浏览器中，无法访问字体或文本字符串的字形

但是，有一些第三方Javascript库对您很有用。例如opentype.js：

---

Nice kitty:）但事实并非如此。我想“生成”这个CoolPath值M9。。等等。您输入svg路径，kitty显示。我想在此文本中输入文本和generete svg路径。编辑您的问题并添加所需输入和输出的示例。因此，“添加路径”的含义与其他示例完全相同。假设您在输入中输入了动词。输出应该是这样的svg元素中的path标记根据输入创建这样的路径需要考虑很多依赖项，正如我提到的，您可以预先定义路径，无论哪种方式，这个问题都太广泛了。

const SVG_LETTERS = {
  a: <svg .../>,
  A: <svg .../>
};

class Hello extends React.Component {
  state = {
    value: 'hi'
  };

  handleInputEvent = e => {...};

  handleSubmit = e => {...};

  render() {
    const { value } = this.state;
    return (
      <div>
        ...

        {[...value].map(char => SVG_LETTERS[char])}
      </div>
    );
  }
}

const CoolSVG = ({ pathString }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className="feather feather-github"
  >
    <path d={pathString} />
  </svg>
);

const CoolPath =
  'M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22';

const DEFAULT_INITIAL = 'Copy the above path';

const App = () => {
  const [value, setValue] = useState(DEFAULT_INITIAL);
  const onChange = e => {
    setValue(e.target.value);
  };
  return (
    <FlexBox>
      <Typography.Text code>{CoolPath}</Typography.Text>
      <br />
      <Input value={value} onChange={onChange} />
      <br />
      <CoolSVG pathString={value} />
    </FlexBox>
  );
};