Блог

Я пытаюсь реализовать стратегическую игру, в которой используется карта svg, которую я создал, и я хотел бы добавить некоторые атрибуты, такие как «войска», в каждый «путь»(который будет территорией) и некоторые другие реквизиты. Можно ли добавить att(реквизит) только к пути, а затем использовать этот компонент внутри тега svg, который представляет собой всю карту. Поэтому в основном я хочу знать, как я могу создать объект территории с помощью att(реквизита) и ввода или метки на карте, чтобы позже я мог добавлять события onClick и другие события.

На данный момент у меня есть карта компонентов, а также компонент территории(я не уверен, что это лучший способ справиться с этим).

 const Territory = ({ tD }) => {
  const [color, setColor] = useState('red')
  const [troops, setTroops] = useState(21)

  return (
    <>
      <input type="text" />
      <path fill-rule="evenodd" clip-rule="evenodd" d={tD} fill={color} stroke="black" />
    </>
  );
};

export default Territory;

const Map = () => {
  return (
    <svg width="1397" height="686" viewBox="0 0 1397 686" fill="none" xmlns="http://www.w3.org/2000/svg">
      {territories.map(territory => (
        <Territory key={territory.id} tD={territory.tD} />
      ))}
    </svg>

  );
};
 

Я хочу добавить войска, которые будут видны(число) во входных данных или метке на карте для каждой территории. что-то вроде этой
карты с входными данными

Возможно ли это сделать? каков был бы наилучший подход к созданию компонента территории, в котором есть реквизит, такой как «войска»?

Большое вам спасибо, кто бы мне ни помог.

Вы выполняете нормальную визуализацию HTML <input /> как часть svg , это не работает. Если что-то не является частью svg , и вы визуализируете это как дочернее svg , вам нужно обернуть это как иностранный объект.

Компонент территории

 const Territory = ({ tD }) => {
  const [color, setColor] = useState('red')
  const [troops, setTroops] = useState(21)

  return (
    <g>
      <foreignObject x="40" y="40" width="100" height="100">
        <div xmlns="http://www.w3.org/1999/xhtml">
          <input type="text" />
        </div>
      </foreignObject>
      <path fill-rule="evenodd" clip-rule="evenodd" d={tD} fill={color} stroke="black" />
    </g>
  );
}; 

Примечание:

• Не забывайте об height width атрибутах и. Вам также может понадобиться x amp; y тоже.
• Не забудьте xmlns="http://www.w3.org/1999/xhtml" указать HTML-элемент контейнера.
• Вы можете использовать svg <g /> тег для группировки элементов.