Question

我有一张世界地图的代码，我使用SVG创建。

我想要做的是在用户点击非洲时隐藏并显示div。当有人在它上面盘旋时，我也想显示大陆的名字。

这是我的代码

<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>

这是一个代码笔示例 http://codepen.io/comunit/pen/xENoad

Answer 1

你走了。给你的div一个ID，然后根据可见性隐藏/显示。

<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>

如何在互动世界中隐藏div

1 个答案: