Wie div auf interaktive Welt zu verbergen

Question

Ich habe diesen Code einer Weltkarte, die ich mit SVG erstellt.

Was ich tun möchte, ist zu verbergen und zeigen Sie die Div, wenn der Benutzer auf Afrika klickt. Ich möchte auch den Namen des Kontinents zeigen, wenn jemand darüber schwebt.

Dies ist mein Code

<div>test</div> 

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg id="svg2321" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="195.61pt" width="372.35pt" version="1.0" preserveAspectRatio="xMidYMid meet" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 372.3541 195.61465"> 
<g id="africa" fill="#53676c" transform="matrix(.016963 0 0 -.016963 -43.875 233.48)"> 
    <path id="path2330" d="m13728 10231c-34-19-84-21-109-5-6 4-15 1-19-5-5-9-14-9-35 1-22 10-29 10-33 0-2-6-11-12-21-12-9 0-23-6-29-12-10-10-17-10-32 0-27 16-55 15-190-7-113-19-180-42-180-63 0-5-7-8-15-5-8 4-17 2-20-3-4-6-13-10-21-10s-26-11-40-25-30-25-37-26c-25-2-62 3-70 10-4 4-33 4-65 0-63-9-100 6-109 42-6 20-20 24-39 11-6-4-22-32-35-62-34-81-57-108-119-137-60-29-120-82-120-107 0-9-10-31-22-47-18-24-23-44-23-94 0-38-5-69-12-76s-13-18-13-24c0-5-16-24-36-40-20-17-45-38-56-48-23-21-80-47-103-47-22 0-36-16-62-72-13-27-27-48-31-48-27 0-82-82-82-123 0-24-26-64-66-102-12-11-32-47-45-80-12-33-30-66-40-72-9-7-20-29-24-50-3-21-9-49-12-62-4-17-2-22 8-19 7 2 24-7 36-20 23-25 30-52 14-52-17 0-22-50-6-73 21-30 19-116-5-177-11-28-20-62-20-77 0-30-49-113-67-113-7 0-13-4-13-10 0-5 7-10 15-10 9 0 20-12 26-27 6-16 15-36 20-45 5-10 5-19-1-23-6-3-10-27-10-53 1-39 6-52 30-76 33-32 39-49 14-39-13 5-15 2-9-18 11-35 18-39 40-22 14 11 16 17 8 20-15 5-18 33-4 33 5 0 14-13 20-30 5-16 15-30 20-30 6 0 11-7 11-15s7-15 15-15 15-3 15-8c0-4 23-31 50-61 32-35 50-63 51-80 1-42 7-64 20-71 6-4 8-13 5-19-4-6-3-11 3-11s8-6 6-12c-3-8 12-20 37-31 42-17 77-45 197-153 121-109 151-118 242-74 96 46 247 50 331 9 11-5 28-3 45 6 92 46 161 75 181 75 12 0 25 7 28 14 7 19 88 36 181 38 59 2 75-1 93-17 25-23 60-87 60-109 0-8 10-25 23-36 17-17 30-20 57-15 19 3 53 8 75 10 22 3 54 6 72 8 26 4 33 0 37-19 3-12 15-26 26-29s20-12 20-19c0-8 6-19 14-25 19-16 10-113-15-163-13-25-15-38-7-40 7-3 9-11 3-24-4-10-10-39-12-64-5-43-18-64-35-54-13 8-9-20 6-52 8-16 22-47 32-69s35-56 54-75c71-69 160-201 160-238 0-12 5-24 10-27 6-4 8-10 5-15s5-33 19-62c13-29 32-77 43-106 18-52 18-54-1-67-18-14-18-17 14-97 22-56 32-98 31-128-2-52-18-100-35-100-19-1-65-84-72-131-8-60-34-149-42-149-13 0-7-184 7-217 7-18 17-33 20-33 10 0 53-89 96-195 9-22 28-60 43-85 21-36 27-59 28-115 1-38 6-92 12-120 6-27 18-90 27-139 19-103 33-135 85-192 24-26 45-65 60-110 24-74 57-146 71-155 5-3 12-26 15-52 6-39 4-47-9-47-8 0-17-6-20-12-4-14 12-48 27-59 5-4 7-18 4-32-7-34 8-58 22-37 6 10 10 11 10 3 0-7 6-13 13-13 8 0 22-9 32-20 22-25 42-25 67-3 12 11 34 17 60 16 23-1 51 5 65 14 29 19 101 24 156 11 26-6 43-6 52 2 8 6 24 10 37 8s22 2 21 8c-1 7 17 14 41 16 53 6 154 72 211 136 11 13 37 40 59 60 37 36 106 134 106 151 0 13 67 81 80 81 11 0 29 37 54 115 18 56 22 130 6 120-18-11-10 13 13 40 12 14 54 38 92 54 51 20 76 37 93 61 14 21 19 37 13 43s-6 19 1 36c13 32 11 112-2 125-6 6-10 15-10 20 0 6 5 4 10-4 8-12 10-11 10 8 0 12-5 21-12 20-7-2-12 11-13 32-1 19-7 36-14 38-6 2-11 14-11 26 0 26 90 126 114 126 9 0 16 4 16 8s8 19 18 32c36 49 73 78 129 101 32 12 60 26 63 29 3 4 12 11 21 16 26 14 93 105 107 146 10 29 10 47 2 80-7 24-11 99-10 173 3 167 4 160-23 172-19 9-28 26-40 80-22 87-21 100 3 106 11 3 20 11 20 17 0 7-7 10-15 6-20-7-32 21-18 43 8 13 4 25-18 52-16 18-29 41-29 49 0 21 33 114 43 121s56 113 64 147c3 12 15 27 26 33 31 17 83 73 103 110 43 85 178 230 260 282 54 34 213 208 214 234 0 4 16 33 35 63s35 62 35 72c0 20 61 151 73 156 4 2 7 8 7 14 0 5 11 32 25 60 14 27 25 65 25 85 0 26 5 36 20 40 21 6 27 19 10 25-9 3-14 56-8 92 5 28-37 40-59 17-22-22-108-52-129-44-8 3-26 0-39-7s-34-10-46-7c-13 4-32-2-49-15-20-14-38-19-61-16-22 3-44-1-64-13-52-32-90-19-130 44-10 15-28 30-42 33l-24 6 23 12c38 19 34 48-14 98-24 25-50 55-58 67-8 11-19 21-25 21-5 0-18 14-27 30-10 17-25 33-35 37s-24 13-31 20c-7 6-19 10-26 7-9-3-15 4-18 20-4 18-1 26 9 26 12 0 12 2-1 15-19 20-23 19-30-7-6-23-7-23-21-3-9 11-20 38-25 60-28 115-42 144-91 182-56 44-70 76-73 173-2 38-9 76-15 84-7 9-14 27-15 41 0 14-3 25-6 25s-24 17-48 38c-47 42-75 112-44 112 11 0 8 7-11 24-14 13-38 50-55 82-16 33-39 76-51 97-11 21-21 43-21 50s-8 24-17 37c-10 14-19 33-20 43-2 11-19 37-38 60-19 22-35 51-35 63 0 13-4 25-9 29-6 3-13 37-17 75-3 38-12 77-19 87-26 35-145 23-189-19-12-11-29-17-41-14-11 2-40 10-65 15-25 6-54 15-65 20-36 16-103 29-128 24-19-4-27 0-32 16s-15 21-38 21c-54 0-104 19-110 40-3 12-14 20-25 20-12 0-24 5-27 10-15 24-110 2-155-36-31-27-40-72-21-103 16-26-24-80-60-81-8 0-33 13-55 28-41 30-104 52-145 52-35 0-66 25-74 61-5 20-16 34-33 41-15 6-40 17-56 26-18 9-52 15-82 14-33-1-66 6-93 18-40 20-67 51-54 64 3 3-1 6-10 6s-17-4-17-10c0-17-29-11-40 9-8 16-4 24 20 45 17 14 37 23 45 20 8-4 15-1 15 6 0 6-5 8-10 5-7-4-8 7-4 33 5 34 3 42-15 51-25 14-27 36-5 58 8 9 13 22 10 30s-1 11 4 8c6-3 10-2 10 3 0 19-14 21-32 5s-19-16-24 4c-5 17-29 32-54 33-3 0-22-9-42-19zm1908-3229c8-11 9-21 2-29-5-7-7-16-4-21 6-11-15-62-26-62-5 0-8-5-8-11 0-7-8-18-17-25-17-13-17-15 0-28 25-20 10-26-43-16-27 5-50 4-57-1-19-16-24 6-18 78 10 107 11 110 52 123 21 7 42 16 47 20 11 11 56-6 72-28zm-346-384c0-15 5-30 11-33 6-4 8-14 5-22s-1-24 5-36c9-16 9-22 0-25-20-7-12-42 13-51 24-10 36-30 36-62 0-11 11-42 25-69 31-61 31-62 0-48-16 7-24 17-20 26 3 7-2 23-10 35s-15 28-15 35c0 8-13 30-30 49-16 18-31 41-32 51 0 9-2 31-4 47-2 17-5 66-7 110-3 72-2 77 9 50 7-16 13-42 14-57zm360-458c6-11 12-41 14-65 1-25 8-51 14-57 15-15 16-55 2-63-14-9-6-148 9-153 6-2 11-8 11-13 0-6-4-7-10-4-5 3-10 1-10-4 0-6-5-11-11-11s-8 9-4 20c4 12 2 26-3 33-10 13-25 90-23 122 7 119 5 153-6 175-7 14-13 28-13 33 0 15 20 6 30-13z"/> 
    <path id="path2332" d="m16760 5958c-8-13-15-38-17-57-3-42-9-48-33-33-16 10-20 10-20-2 0-8 6-17 13-20 6-3 2-3-10 0-23 5-27-1-24-38 1-9-3-19-9-23-5-3-10-15-10-25 0-13-5-17-15-14-9 4-15 0-15-9 0-20-71-70-125-88-22-7-44-17-49-21-6-4-20-8-33-8-18 0-23-5-23-27 0-16-9-41-19-57-20-30-20-54 0-169 12-67 12-69-17-125-16-31-33-60-37-63-35-25-48-116-23-163 8-16 12-44 9-70s-1-46 6-50c6-4 11-15 11-25 0-22 30-51 53-51 9 0 17-4 17-10 0-15 52-11 74 5 11 8 32 15 47 15 30 0 69 40 69 69 0 9 6 25 14 36 7 11 19 45 26 75 8 30 22 71 31 91 10 20 24 58 30 85 7 27 29 92 50 146 21 53 41 114 44 135 12 72 15 83 28 80 12-2 13 7 1 83l-7 45 20-24 20-25 17 32c12 24 14 37 6 51-5 11-10 40-10 64s-5 59-11 78c-14 44-53 128-59 129-3 0-12-10-20-22z"/> 
</g> 

</svg> 

</body> 
</html> 

hier ist ein Code Stift Beispiel http://codepen.io/comunit/pen/xENoad

Answer 1

Hier gehen Sie. Geben Sie Ihrer ID eine ID und dann verbergen/zeigen Sie basierend auf Sichtbarkeit.

<div id="divVisible">test</div> 

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg id="svg2321" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="195.61pt" width="372.35pt" version="1.0" preserveAspectRatio="xMidYMid meet" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 372.3541 195.61465"> 
<g id="africa" fill="#53676c" transform="matrix(.016963 0 0 -.016963 -43.875 233.48)"> 
    <path id="path2330" d="m13728 10231c-34-19-84-21-109-5-6 4-15 1-19-5-5-9-14-9-35 1-22 10-29 10-33 0-2-6-11-12-21-12-9 0-23-6-29-12-10-10-17-10-32 0-27 16-55 15-190-7-113-19-180-42-180-63 0-5-7-8-15-5-8 4-17 2-20-3-4-6-13-10-21-10s-26-11-40-25-30-25-37-26c-25-2-62 3-70 10-4 4-33 4-65 0-63-9-100 6-109 42-6 20-20 24-39 11-6-4-22-32-35-62-34-81-57-108-119-137-60-29-120-82-120-107 0-9-10-31-22-47-18-24-23-44-23-94 0-38-5-69-12-76s-13-18-13-24c0-5-16-24-36-40-20-17-45-38-56-48-23-21-80-47-103-47-22 0-36-16-62-72-13-27-27-48-31-48-27 0-82-82-82-123 0-24-26-64-66-102-12-11-32-47-45-80-12-33-30-66-40-72-9-7-20-29-24-50-3-21-9-49-12-62-4-17-2-22 8-19 7 2 24-7 36-20 23-25 30-52 14-52-17 0-22-50-6-73 21-30 19-116-5-177-11-28-20-62-20-77 0-30-49-113-67-113-7 0-13-4-13-10 0-5 7-10 15-10 9 0 20-12 26-27 6-16 15-36 20-45 5-10 5-19-1-23-6-3-10-27-10-53 1-39 6-52 30-76 33-32 39-49 14-39-13 5-15 2-9-18 11-35 18-39 40-22 14 11 16 17 8 20-15 5-18 33-4 33 5 0 14-13 20-30 5-16 15-30 20-30 6 0 11-7 11-15s7-15 15-15 15-3 15-8c0-4 23-31 50-61 32-35 50-63 51-80 1-42 7-64 20-71 6-4 8-13 5-19-4-6-3-11 3-11s8-6 6-12c-3-8 12-20 37-31 42-17 77-45 197-153 121-109 151-118 242-74 96 46 247 50 331 9 11-5 28-3 45 6 92 46 161 75 181 75 12 0 25 7 28 14 7 19 88 36 181 38 59 2 75-1 93-17 25-23 60-87 60-109 0-8 10-25 23-36 17-17 30-20 57-15 19 3 53 8 75 10 22 3 54 6 72 8 26 4 33 0 37-19 3-12 15-26 26-29s20-12 20-19c0-8 6-19 14-25 19-16 10-113-15-163-13-25-15-38-7-40 7-3 9-11 3-24-4-10-10-39-12-64-5-43-18-64-35-54-13 8-9-20 6-52 8-16 22-47 32-69s35-56 54-75c71-69 160-201 160-238 0-12 5-24 10-27 6-4 8-10 5-15s5-33 19-62c13-29 32-77 43-106 18-52 18-54-1-67-18-14-18-17 14-97 22-56 32-98 31-128-2-52-18-100-35-100-19-1-65-84-72-131-8-60-34-149-42-149-13 0-7-184 7-217 7-18 17-33 20-33 10 0 53-89 96-195 9-22 28-60 43-85 21-36 27-59 28-115 1-38 6-92 12-120 6-27 18-90 27-139 19-103 33-135 85-192 24-26 45-65 60-110 24-74 57-146 71-155 5-3 12-26 15-52 6-39 4-47-9-47-8 0-17-6-20-12-4-14 12-48 27-59 5-4 7-18 4-32-7-34 8-58 22-37 6 10 10 11 10 3 0-7 6-13 13-13 8 0 22-9 32-20 22-25 42-25 67-3 12 11 34 17 60 16 23-1 51 5 65 14 29 19 101 24 156 11 26-6 43-6 52 2 8 6 24 10 37 8s22 2 21 8c-1 7 17 14 41 16 53 6 154 72 211 136 11 13 37 40 59 60 37 36 106 134 106 151 0 13 67 81 80 81 11 0 29 37 54 115 18 56 22 130 6 120-18-11-10 13 13 40 12 14 54 38 92 54 51 20 76 37 93 61 14 21 19 37 13 43s-6 19 1 36c13 32 11 112-2 125-6 6-10 15-10 20 0 6 5 4 10-4 8-12 10-11 10 8 0 12-5 21-12 20-7-2-12 11-13 32-1 19-7 36-14 38-6 2-11 14-11 26 0 26 90 126 114 126 9 0 16 4 16 8s8 19 18 32c36 49 73 78 129 101 32 12 60 26 63 29 3 4 12 11 21 16 26 14 93 105 107 146 10 29 10 47 2 80-7 24-11 99-10 173 3 167 4 160-23 172-19 9-28 26-40 80-22 87-21 100 3 106 11 3 20 11 20 17 0 7-7 10-15 6-20-7-32 21-18 43 8 13 4 25-18 52-16 18-29 41-29 49 0 21 33 114 43 121s56 113 64 147c3 12 15 27 26 33 31 17 83 73 103 110 43 85 178 230 260 282 54 34 213 208 214 234 0 4 16 33 35 63s35 62 35 72c0 20 61 151 73 156 4 2 7 8 7 14 0 5 11 32 25 60 14 27 25 65 25 85 0 26 5 36 20 40 21 6 27 19 10 25-9 3-14 56-8 92 5 28-37 40-59 17-22-22-108-52-129-44-8 3-26 0-39-7s-34-10-46-7c-13 4-32-2-49-15-20-14-38-19-61-16-22 3-44-1-64-13-52-32-90-19-130 44-10 15-28 30-42 33l-24 6 23 12c38 19 34 48-14 98-24 25-50 55-58 67-8 11-19 21-25 21-5 0-18 14-27 30-10 17-25 33-35 37s-24 13-31 20c-7 6-19 10-26 7-9-3-15 4-18 20-4 18-1 26 9 26 12 0 12 2-1 15-19 20-23 19-30-7-6-23-7-23-21-3-9 11-20 38-25 60-28 115-42 144-91 182-56 44-70 76-73 173-2 38-9 76-15 84-7 9-14 27-15 41 0 14-3 25-6 25s-24 17-48 38c-47 42-75 112-44 112 11 0 8 7-11 24-14 13-38 50-55 82-16 33-39 76-51 97-11 21-21 43-21 50s-8 24-17 37c-10 14-19 33-20 43-2 11-19 37-38 60-19 22-35 51-35 63 0 13-4 25-9 29-6 3-13 37-17 75-3 38-12 77-19 87-26 35-145 23-189-19-12-11-29-17-41-14-11 2-40 10-65 15-25 6-54 15-65 20-36 16-103 29-128 24-19-4-27 0-32 16s-15 21-38 21c-54 0-104 19-110 40-3 12-14 20-25 20-12 0-24 5-27 10-15 24-110 2-155-36-31-27-40-72-21-103 16-26-24-80-60-81-8 0-33 13-55 28-41 30-104 52-145 52-35 0-66 25-74 61-5 20-16 34-33 41-15 6-40 17-56 26-18 9-52 15-82 14-33-1-66 6-93 18-40 20-67 51-54 64 3 3-1 6-10 6s-17-4-17-10c0-17-29-11-40 9-8 16-4 24 20 45 17 14 37 23 45 20 8-4 15-1 15 6 0 6-5 8-10 5-7-4-8 7-4 33 5 34 3 42-15 51-25 14-27 36-5 58 8 9 13 22 10 30s-1 11 4 8c6-3 10-2 10 3 0 19-14 21-32 5s-19-16-24 4c-5 17-29 32-54 33-3 0-22-9-42-19zm1908-3229c8-11 9-21 2-29-5-7-7-16-4-21 6-11-15-62-26-62-5 0-8-5-8-11 0-7-8-18-17-25-17-13-17-15 0-28 25-20 10-26-43-16-27 5-50 4-57-1-19-16-24 6-18 78 10 107 11 110 52 123 21 7 42 16 47 20 11 11 56-6 72-28zm-346-384c0-15 5-30 11-33 6-4 8-14 5-22s-1-24 5-36c9-16 9-22 0-25-20-7-12-42 13-51 24-10 36-30 36-62 0-11 11-42 25-69 31-61 31-62 0-48-16 7-24 17-20 26 3 7-2 23-10 35s-15 28-15 35c0 8-13 30-30 49-16 18-31 41-32 51 0 9-2 31-4 47-2 17-5 66-7 110-3 72-2 77 9 50 7-16 13-42 14-57zm360-458c6-11 12-41 14-65 1-25 8-51 14-57 15-15 16-55 2-63-14-9-6-148 9-153 6-2 11-8 11-13 0-6-4-7-10-4-5 3-10 1-10-4 0-6-5-11-11-11s-8 9-4 20c4 12 2 26-3 33-10 13-25 90-23 122 7 119 5 153-6 175-7 14-13 28-13 33 0 15 20 6 30-13z"/> 
    <path id="path2332" d="m16760 5958c-8-13-15-38-17-57-3-42-9-48-33-33-16 10-20 10-20-2 0-8 6-17 13-20 6-3 2-3-10 0-23 5-27-1-24-38 1-9-3-19-9-23-5-3-10-15-10-25 0-13-5-17-15-14-9 4-15 0-15-9 0-20-71-70-125-88-22-7-44-17-49-21-6-4-20-8-33-8-18 0-23-5-23-27 0-16-9-41-19-57-20-30-20-54 0-169 12-67 12-69-17-125-16-31-33-60-37-63-35-25-48-116-23-163 8-16 12-44 9-70s-1-46 6-50c6-4 11-15 11-25 0-22 30-51 53-51 9 0 17-4 17-10 0-15 52-11 74 5 11 8 32 15 47 15 30 0 69 40 69 69 0 9 6 25 14 36 7 11 19 45 26 75 8 30 22 71 31 91 10 20 24 58 30 85 7 27 29 92 50 146 21 53 41 114 44 135 12 72 15 83 28 80 12-2 13 7 1 83l-7 45 20-24 20-25 17 32c12 24 14 37 6 51-5 11-10 40-10 64s-5 59-11 78c-14 44-53 128-59 129-3 0-12-10-20-22z"/> 
</g> 
</svg> 

<script type="text/javascript"> 
$("#svg2321").click(function(e) { 
     e.preventDefault(); 
     if ($("#divVisible").is(":visible")) { 
      $("#divVisible").hide(); 
     } else { 
      $("#divVisible").show(); 
     } 
    }); 
</script>