Estoy tratando de implementar un juego de estrategia que usa un mapa svg que creé y me gustaría agregar algunos atributos como "tropas" en cada "camino" (que sería el territorio) y algunos otros accesorios. ¿Es posible agregar att (accesorios) solo a una ruta y luego usar este componente dentro de una etiqueta svg que es todo el mapa? Básicamente, quiero saber cómo puedo crear un objeto de territorio con att(props) y una entrada o etiqueta en el mapa, para luego poder agregar eventos onClick y otros eventos.
Por ahora tengo el componente Mapa y también el componente Territorio (no estoy seguro si es la mejor manera de manejarlo).
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> ); };Quiero agregar las tropas para que sean visibles (número) en una entrada o etiqueta en el mapa para cada territorio. algo como este mapa con entradas
¿Es posible hacer lo? cuál sería el mejor enfoque para construir un componente de territorio que tenga accesorios como "tropas"
Muchas gracias a quien me ayude.
Está renderizando HTML <input /> como parte de svg , esto no funciona. Si algo no es parte de svg y lo está representando como un elemento secundario de svg , entonces debe envolverlo como un objeto extranjero .
Componente de territorio
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> ); };Nota:
height y width . También puede necesitar x & y .xmlns="http://www.w3.org/1999/xhtml" en el elemento HTML contenedor.svg <g /> para agrupar los elementos.