Реагировать компонент внутри элемента SVG

Question

Я хочу встроить пользовательский компонент реакции в SVG, но он не работает. Это даже разрешено в SVG? если нет, есть ли обходные пути? Ниже приведен мой код, пытающийся вставить модальный компонент:

<polygon
        id="Paris"
        <Modal show={show} handleClose={hideModal}>
          <p>Modal</p>
          <p>Data</p>
        </Modal>
        <button type="button" onClick={showModal}>
          open
        </button>
        stroke="#010101"
        fill="rgb(251, 106, 106)"
        stroke-width="2"
        stroke-miterlimit="10"
        points="1596.182,374.685 .../>

То, что я пытаюсь выполнить sh, - это отображение всплывающего окна при нажатии на провинцию внутри карты svg.

Answer 1

После комментария @Robert Longson я вставил модальный компонент в посторонний объект, и он работает. Тем не менее, модальное окно необходимо отрегулировать вручную, если речь идет о координатах x, y, чтобы оно всплывало точно над нажатым элементом svg:

 <foreignObject x="58%" y="6%" width="200px" height="250px">
        <Modal show={show} handleClose={hideModal}>
          <p style={{ padding: "10px" }}>Modal</p>
          <p>Data</p>
        </Modal>
</foreignObject>

Обратите внимание, что вы должны установить x, y Атрибуты, height, width для этого работают, как описано в этом ответе Реагировать - html теги внутри svg

Answer 2

Для того, что вы пытаетесь достичь, я заверну svg в модал. Примерно так:

<Modal>
   <svg></svg>
</Modal>

В вашем модальном компоненте обязательно отображайте svg как дочерние:

return (
    <Fragment>
      {props.children}
    </Fragment>
  );

Для получения дополнительной информации посмотрите в do c: https://reactjs.org/docs/composition-vs-inheritance.html