Создать путь SVG из входного значения

Question

Есть ли шанс создать элемент SVG с путем, равным преобразованному входному значению?

Примерно задача заключается в следующем. Пользователь вводит значение во входные данные, затем введенное значение будет преобразовано в путь svg и отправлено в серверную часть. Введенные значения должны быть чувствительны к изменениям шрифта, но это на более поздней стадии.

Ввод: глагол
Выход: https://jsfiddle.net/4uhwsjvk/

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

  handleInputEvent = e => {
    e.preventDefault();
    this.setState({
        value: e.target.value,
    })
  }

  handleSubmit = e => {
    e.preventDefault();
    alert('create svg from input value');
  }

  render() {
    return (
    <div>
     <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.value} onChange={this.handleInputEvent} />
        <button>submit</button>
      </form>

      {this.state.value}
    </div>

    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

https://jsfiddle.net/1wda3bj7/2/

Answer 1

По умолчанию в браузере нет способа получить доступ к формам глифов шрифтов или текстовой строки.

Однако существуют библиотеки Javascript сторонних производителей, которые будут вам полезны. Например, opentype.js:

https://opentype.js.org/

Answer 2

Редактировать:

В вашем случае вы хотите отобразить каждую букву в заранее определенный 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>
    );
  }
}

---

Старый ответ

Вы должны рассматривать SVG как ReactElement:

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>
  );
};