Fatal编程技术网
  • javascript/
  • Javascript React.js获取SVG上的事件'；s路径

Javascript React.js获取SVG上的事件'；s路径

javascript reactjs svg

Javascript React.js获取SVG上的事件'；s路径,javascript,reactjs,svg,Javascript,Reactjs,Svg,我有一个React.js，它在其中呈现多个SVG的路径。 如何获取特定于每个路径的事件，如单击、悬停等 我试过单击onClick，但不起作用 import React, { Component } from "react"; class App extends Component { render() { return ( <React.Fragment> <svg

我有一个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;

import React，{Component}来自“React”；
类应用程序扩展组件{
render（）{
返回(
log（“未调用！不工作”）
}
fill=“#CEE3F5”
笔划=“#6e6e”
冲程宽度=“0.4”
id=“UG”
d="M489.1343.2 L488.2343.5 L487.4342.8 L488.5342.7 Z M496.1338.9 L496.5337.7 L497.6337.7 L497.3339.5 Z M484.6348.5 L484.6348.4 L484.7348.5 Z M466.2344.1 L468.4341.3313 L466.6340.9 L468.7335.9 L468.7333.5 L473.3329.8 L474.1331.5 L477.2327.4 L481.0324.5 L480.5 L480.0322.0322.5 L4475.3319.L468.L4937.L478.L487.L478.L487.L487.L487.L488 L487.L477.L477.L477.L477.L477。0309.5 L484.3308.2 L487.7310.7 L489.3308.9 L494.8307.7 L499.1308.6 L502.9304.9 L504.5308.6 L506.8309.5 L506.3311.8 L507.9315.6 L510.8319.5 L511.2326.2 L509.7329.9 L507.2331.0 L502.9338.2 L499.3338.7 L496.8337.0 L494.6339.2 L491.1339.0 L485.4341.3 L486.2348.2348.4348.4348.4348.L484.2348.4348.4348.4348.L484.23485.7351.7 L465.5347.8 Z“
>
乌干达
3.
佐治亚大学。
东非
撒哈拉以南非洲
乔治亚大学
UG
23424974
非洲
0.59
0.45
ug
UG
尼日利亚
2.
尼日利亚
西非
撒哈拉以南非洲
美国国家地理空间情报局
NG
23424908
非洲
0.50
0.45
ng
NG
);
}
}
导出默认应用程序；
尝试为每个路径添加标记g，并为标记g添加onClick listener。可能会奏效。下面的示例

<g id="Port"  onClick={() => console.log("working")}>

console.log（“工作”）}>
对于那些从未来来到这里的人，我用这个技巧解决了这个问题

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;

import React，{Component}来自“React”；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；
然后，您可以尝试使用classname give给元素标记g或路径，并使用componentDidMount函数上的jquery将onclick事件附加到该元素，然后获取元素。在React应用程序中使用jquery不是一件好事。而且，也不能解决实际问题的要求。