代码之家  ›  专栏  ›  技术社区  ›  Singh

React.js获取SVG路径上的事件

  •  0
  • Singh  · 技术社区  · 6 年前

    我有一个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;
    
    2 回复  |  直到 6 年前
        1
  •  1
  •   kumar k    6 年前

    尝试添加标记 为每个路径添加onClick listener . 可能会有用。下面的例子

    <g id="Port"  onClick={() => console.log("working")}>
    
        2
  •  0
  •   Singh    6 年前

    对于那些从未来来到这里的人,我用这个技巧解决了

    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;