我有一个React.js，它在其中渲染了多个SVG路径。 如何获得特定于每个路径的事件，例如单击，悬停等？
我尝试了onClick，但是没有用。
import React, { Component } from "react";
class App extends Component {
render() {
return (
<React.Fragment>
<svg
width="100%"
height="120vh"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<defs>
<g id="Port">
<path
onClick={() =>
console.log("Not called! Doesn't work")
}
fill="#CEE3F5"
stroke="#6E6E6E"
strokeWidth="0.4"
id="UG"
d="M489.1,343.2 L488.2,343.5 L487.4,342.8 L488.5,342.7 Z M496.1,338.9 L496.5,337.7 L497.6,337.7 L497.3,339.5 Z M484.6,348.5 L484.6,348.4 L484.7,348.5 Z M466.2,344.1 L468.4,341.3 L466.6,340.9 L468.7,335.9 L468.7,333.5 L473.3,329.8 L474.1,331.5 L477.2,327.4 L481.0,324.5 L480.0,322.0 L475.3,319.5 L476.5,315.9 L475.6,314.7 L476.4,310.9 L478.9,308.4 L482.0,309.5 L484.3,308.2 L487.7,310.7 L489.3,308.9 L494.8,307.7 L499.1,308.6 L502.9,304.9 L504.5,308.6 L506.8,309.5 L506.3,311.8 L507.9,315.6 L510.8,319.5 L511.2,326.2 L509.7,329.9 L507.2,331.0 L502.9,338.2 L499.3,338.7 L496.8,337.0 L494.6,339.2 L491.1,339.0 L485.4,341.3 L486.2,342.7 L483.5,346.8 L484.2,348.5 L476.2,348.5 L473.2,349.0 L468.4,352.4 L465.7,351.7 L465.5,347.8 Z"
>
<desc xmlns="http://www.highcharts.com/svg/namespace">
<name>Uganda</name>
<labelrank>3</labelrank>
<country-abbrev>Uga.</country-abbrev>
<subregion>Eastern Africa</subregion>
<region-wb>Sub-Saharan Africa</region-wb>
<iso-a3>UGA</iso-a3>
<iso-a2>UG</iso-a2>
<woe-id>23424974</woe-id>
<continent>Africa</continent>
<hc-middle-x>0.59</hc-middle-x>
<hc-middle-y>0.45</hc-middle-y>
<hc-key>ug</hc-key>
<hc-a2>UG</hc-a2>
</desc>
</path>
<path
fill="#CEE3F5"
stroke="#6E6E6E"
strokeWidth="0.4"
id="NG"
d="M278.2,303.1 L280.0,303.3 L276.4,303.8 L277.1,302.9 Z M238.8,287.6 L238.8,287.6 L239.4,282.0 L238.4,274.7 L239.1,264.8 L241.8,264.2 L242.1,261.6 L245.4,258.0 L245.8,254.2 L248.0,251.5 L247.0,247.2 L245.0,244.8 L245.9,242.2 L246.2,235.0 L250.0,230.9 L250.2,226.8 L253.4,224.8 L259.9,224.3 L262.3,223.2 L269.2,225.3 L273.8,230.6 L277.9,229.7 L281.0,227.8 L283.7,227.9 L288.9,231.2 L297.0,232.0 L299.4,229.2 L305.7,227.2 L312.2,227.2 L317.5,229.3 L321.0,229.8 L321.7,228.2 L328.5,224.1 L330.6,224.2 L334.5,229.6 L335.5,235.6 L339.6,237.4 L339.0,243.2 L335.4,245.4 L333.9,245.1 L330.4,250.2 L329.3,254.7 L327.7,255.4 L327.3,260.0 L324.5,261.3 L324.0,266.0 L319.1,269.8 L318.9,273.3 L315.1,279.4 L316.3,280.7 L313.6,282.7 L311.6,286.4 L305.5,281.2 L304.6,282.7 L301.4,281.7 L290.8,291.5 L290.4,297.3 L288.7,300.2 L288.7,300.2 L285.6,299.2 L286.0,302.5 L281.3,302.8 L277.9,302.0 L275.4,303.8 L268.4,304.9 L263.4,301.9 L261.2,296.0 L257.3,290.5 L253.2,287.5 L248.7,286.9 Z"
>
<desc xmlns="http://www.highcharts.com/svg/namespace">
<name>Nigeria</name>
<labelrank>2</labelrank>
<country-abbrev>Nigeria</country-abbrev>
<subregion>Western Africa</subregion>
<region-wb>Sub-Saharan Africa</region-wb>
<iso-a3>NGA</iso-a3>
<iso-a2>NG</iso-a2>
<woe-id>23424908</woe-id>
<continent>Africa</continent>
<hc-middle-x>0.50</hc-middle-x>
<hc-middle-y>0.45</hc-middle-y>
<hc-key>ng</hc-key>
<hc-a2>NG</hc-a2>
</desc>
</path>
</g>
</defs>
<use x="0" y="0" href="#Port" />
</svg>
</React.Fragment>
);
}
}
export default App;
答案 0 :(得分：0)
尝试为每个路径添加标签 g ，并为标签 g 添加onClick侦听器。可能会起作用。下面的例子
<g id="Port" onClick={() => console.log("working")}>
答案 1 :(得分：0)
对于那些将来会来到这里的人，我使用此技巧解决了
import React, { Component } from "react";
class App extends Component {
render() {
return (
<React.Fragment>
<svg
width="100%"
height="120vh"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<a
href="javascript:void(0)"
onClick={() => console.log("Called this")}
>
<path
fill="#CEE3F5"
stroke="#6E6E6E"
strokeWidth="0.4"
id="UG"
d="M489.1,343.2 L488.2,343.5 L487.4,342.8 L488.5,342.7 Z M496.1,338.9 L496.5,337.7 L497.6,337.7 L497.3,339.5 Z M484.6,348.5 L484.6,348.4 L484.7,348.5 Z M466.2,344.1 L468.4,341.3 L466.6,340.9 L468.7,335.9 L468.7,333.5 L473.3,329.8 L474.1,331.5 L477.2,327.4 L481.0,324.5 L480.0,322.0 L475.3,319.5 L476.5,315.9 L475.6,314.7 L476.4,310.9 L478.9,308.4 L482.0,309.5 L484.3,308.2 L487.7,310.7 L489.3,308.9 L494.8,307.7 L499.1,308.6 L502.9,304.9 L504.5,308.6 L506.8,309.5 L506.3,311.8 L507.9,315.6 L510.8,319.5 L511.2,326.2 L509.7,329.9 L507.2,331.0 L502.9,338.2 L499.3,338.7 L496.8,337.0 L494.6,339.2 L491.1,339.0 L485.4,341.3 L486.2,342.7 L483.5,346.8 L484.2,348.5 L476.2,348.5 L473.2,349.0 L468.4,352.4 L465.7,351.7 L465.5,347.8 Z"
/>
</a>
<a
href="javascript:void(0)"
onClick={() => console.log("Called another one")}
>
<path
fill="#CEE3F5"
stroke="#6E6E6E"
strokeWidth="0.4"
id="NG"
d="M278.2,303.1 L280.0,303.3 L276.4,303.8 L277.1,302.9 Z M238.8,287.6 L238.8,287.6 L239.4,282.0 L238.4,274.7 L239.1,264.8 L241.8,264.2 L242.1,261.6 L245.4,258.0 L245.8,254.2 L248.0,251.5 L247.0,247.2 L245.0,244.8 L245.9,242.2 L246.2,235.0 L250.0,230.9 L250.2,226.8 L253.4,224.8 L259.9,224.3 L262.3,223.2 L269.2,225.3 L273.8,230.6 L277.9,229.7 L281.0,227.8 L283.7,227.9 L288.9,231.2 L297.0,232.0 L299.4,229.2 L305.7,227.2 L312.2,227.2 L317.5,229.3 L321.0,229.8 L321.7,228.2 L328.5,224.1 L330.6,224.2 L334.5,229.6 L335.5,235.6 L339.6,237.4 L339.0,243.2 L335.4,245.4 L333.9,245.1 L330.4,250.2 L329.3,254.7 L327.7,255.4 L327.3,260.0 L324.5,261.3 L324.0,266.0 L319.1,269.8 L318.9,273.3 L315.1,279.4 L316.3,280.7 L313.6,282.7 L311.6,286.4 L305.5,281.2 L304.6,282.7 L301.4,281.7 L290.8,291.5 L290.4,297.3 L288.7,300.2 L288.7,300.2 L285.6,299.2 L286.0,302.5 L281.3,302.8 L277.9,302.0 L275.4,303.8 L268.4,304.9 L263.4,301.9 L261.2,296.0 L257.3,290.5 L253.2,287.5 L248.7,286.9 Z"
/>
</a>
</svg>
</React.Fragment>
);
}
}
export default App;