我正在嘗試實作一個使用我創建的 svg 地圖的策略游戲，我想在每個“路徑”（這將是領土）和其他一些道具中添加一些屬性，如“部隊”。是否可以僅將 att(props) 添加到路徑，然后在整個地圖的 svg 標簽中使用此組件。所以基本上我想知道如何使用 att(props) 和地圖中的輸入或標簽創建領土物件，以便稍后我可以添加 onClick 事件和其他事件。
現在我有組件 Map 和 Territory 組件（我不確定這是否是處理它的最佳方法。）
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>
);
};
我想在每個領土的地圖的輸入或標簽中添加可見的部隊（數字）。像這張 帶有輸入的地圖
有可能做到嗎？構建具有“部隊”等道具的領土組件的最佳方法是什么
非常感謝幫助我的人。
uj5u.com熱心網友回復：
您將正常渲染HTML <input />為 的一部分svg，這不起作用。如果有任何東西不是的一部分svg并且您將其呈現為的孩子，svg那么您必須將其包裝為foreignObject。
領土組成部分
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&y。 - 不要忘記
xmlns="http://www.w3.org/1999/xhtml"容器 HTML 元素。 - 您可以使用
svg <g />標簽對元素進行分組。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312400.html
標籤：javascript 反应 svg 下一个.js
上一篇：圖形之間的差異
下一篇：影片SVG箭頭和z-index