#javascript #reactjs #svg #next.js
Вопрос:
Я пытаюсь реализовать стратегическую игру, в которой используется карта 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>
);
};
Я хочу добавить войска, которые будут видны(число) во входных данных или метке на карте для каждой территории. что-то вроде этой
карты с входными данными
Возможно ли это сделать? каков был бы наилучший подход к созданию компонента территории, в котором есть реквизит, такой как «войска»?
Большое вам спасибо, кто бы мне ни помог.
Ответ №1:
Вы выполняете нормальную визуализацию 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 />
тег для группировки элементов.
Комментарии:
1. Спасибо вам за вашу помощь! У меня просто есть время, чтобы увидеть это и поработать над этим сейчас. Это сработало 🙂 . единственное, что мне нужно сделать, это найти X и Y для правильных позиций.