我正在开发一个有地图的项目。当您将鼠标悬停在地图上时，地图的每个部分都会突出显示，并且会超链接到相应的网站。在某些区域，我可以只调整一个div，并将其覆盖的背景图像设置为不透明度：0。在悬停时我将不透明度更改为1，一切都很好。其他一些区域的形状太具体了，所以我用转换来旋转div，但是我不够具体。我的重叠太多了。也许我会以错误的方式解决这个问题。我正在寻求任何帮助。我尝试了很多东西而且我已经陷入了困境。这就是我现在所处的位置。
https://jsfiddle.net/4w3emy4o/2/
<div class="erieBasin">
<a href="http://erca.org/" target="_blank"><div id="essex"></div></a>
<a href="http://www.lowerthames-conservation.on.ca/" target="_blank"><div id="thames"></div></a>
<div class="kettle"></div>
<div class="close"></div>
</div>
.erieBasin {
position:absolute;
width:900px;
height:589px;
z-index:100;
background-image: url(http://i67.tinypic.com/2h4b23k.jpg);
}
#essex {
position:absolute;
top:270px;
left:275px;
width:91px;
height:72px;
background-image: url(http://i63.tinypic.com/28s6cew.jpg);
opacity: 0;
}
#essex:hover {
opacity:1;
}
#thames {
position:absolute;
top:222px;
left:325px;
width:215px;
height:60px;
background-image: url(http://i66.tinypic.com/2nl8dwx.jpg);
-ms-transform: rotate(-32deg); /* IE 9 */
-webkit-transform: rotate(-32deg); /* Safari */
transform: rotate(-32deg);
opacity: 0;
}
#thames:hover {
opacity:1;
}
答案 0 :(得分：1)
虽然我喜欢freestock的答案，但我想提出一个不同的方法。
有一个元素，专门为此目的而设计：map。您可以使用它定义多边形。
基本用法是：
<img src="shapes.png" usemap="#shapes" >
<map name="shapes">
<area shape=rect coords="50,50,100,100">
<area shape=rect coords="25,25,125,125" href="red.html" >
<area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html">
</map>
取自w3链接的例子
答案 1 :(得分：0)
SVG替代方案：。
1- SVG Clip-path 在第一个片段中，有一个svg剪辑路径（帮助：clip-path-generator）应用于图像和blury克隆没有剪辑路径，两者在容器内。添加了低不透明度的颜色层，使高光更加清晰。剪辑路径区域在:hover
ps.1：使用多边形套索工具快速而粗心，因为它只是一个例子。
ps.2：在此剪辑路径生成器上，您可以单击桌面上的图片并将其拖动到画布中。您可以轻松地在网络上找到更多剪辑路径生成器，如this one。
ps.3：您可以在图形软件（如Inkscape或Adobe Illustrator）上构建svg形状。
body {
margin: 0;
background: lavender;
}
.clipped {
cursor: pointer;
}
.clipped:hover {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}
.container {
position: relative;
vertical-align: bottom;
display: inline-block;
border: 4px solid indigo;
box-sizing: border-box;
overflow: hidden;
}
.color {
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
background-color: red;
opacity: 0.2;
}
.back {
-webkit-filter: blur(2px); /* Chrome, Safari, Opera */
filter: blur(2px);
}
.clipped {
position: absolute;
top:0;
left:0;
}
#clip1 {
/*Chrome,Safari*/
-webkit-clip-path: polygon(578px 230px,581px 228px,584px 228px,587px 230px,591px 232px,597px 236px,618px 239px,624px 238px,642px 241px,667px 245px,674px 245px,677px 243px,666px 238px,661px 240px,653px 238px,647px 233px,643px 234px,627px 234px,624px 230px,634px 223px,639px 225px,638px 221px,646px 213px,652px 207px,656px 204px,660px 206px,668px 203px,678px 200px,686px 203px,690px 199px,715px 195px,713px 192px,714px 186px,711px 188px,705px 188px,694px 185px,692px 180px,688px 183px,686px 178px,672px 175px,664px 181px,663px 176px,659px 175px,642px 172px,641px 170px,634px 168px,634px 160px,631px 157px,625px 157px,625px 155px,619px 155px,597px 158px,587px 167px,589px 171px,584px 173px,574px 183px,574px 186px,567px 188px,565px 189px,577px 190px,579px 193px,578px 196px,575px 196px,569px 202px,567px 206px,562px 210px,569px 215px,572px 217px,574px 226px);
/*Firefox*/
clip-path: url("#clipPolygon");
/* iOS support inline encoded svg file*/
-webkit-mask: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTU3OCwyMzAgTDU4MSwyMjggNTg0LDIyOCA1ODcsMjMwIDU5MSwyMzIgNTk3LDIzNiA2MTgsMjM5IDYyNCwyMzggNjQyLDI0MSA2NjcsMjQ1IDY3NCwyNDUgNjc3LDI0MyA2NjYsMjM4IDY2MSwyNDAgNjUzLDIzOCA2NDcsMjMzIDY0MywyMzQgNjI3LDIzNCA2MjQsMjMwIDYzNCwyMjMgNjM5LDIyNSA2MzgsMjIxIDY0NiwyMTMgNjUyLDIwNyA2NTYsMjA0IDY2MCwyMDYgNjY4LDIwMyA2NzgsMjAwIDY4NiwyMDMgNjkwLDE5OSA3MTUsMTk1IDcxMywxOTIgNzE0LDE4NiA3MTEsMTg4IDcwNSwxODggNjk0LDE4NSA2OTIsMTgwIDY4OCwxODMgNjg2LDE3OCA2NzIsMTc1IDY2NCwxODEgNjYzLDE3NiA2NTksMTc1IDY0MiwxNzIgNjQxLDE3MCA2MzQsMTY4IDYzNCwxNjAgNjMxLDE1NyA2MjUsMTU3IDYyNSwxNTUgNjE5LDE1NSA1OTcsMTU4IDU4NywxNjcgNTg5LDE3MSA1ODQsMTczIDU3NCwxODMgNTc0LDE4NiA1NjcsMTg4IDU2NSwxODkgNTc3LDE5MCA1NzksMTkzIDU3OCwxOTYgNTc1LDE5NiA1NjksMjAyIDU2NywyMDYgNTYyLDIxMCA1NjksMjE1IDU3MiwyMTcgNTc0LDIyNiB6Ii8+CiAgPC9jbGlwUGF0aD4KICA8cGF0aCBpZD0ic3ZnTWFzayIgZD0iTTU3OCwyMzAgTDU4MSwyMjggNTg0LDIyOCA1ODcsMjMwIDU5MSwyMzIgNTk3LDIzNiA2MTgsMjM5IDYyNCwyMzggNjQyLDI0MSA2NjcsMjQ1IDY3NCwyNDUgNjc3LDI0MyA2NjYsMjM4IDY2MSwyNDAgNjUzLDIzOCA2NDcsMjMzIDY0MywyMzQgNjI3LDIzNCA2MjQsMjMwIDYzNCwyMjMgNjM5LDIyNSA2MzgsMjIxIDY0NiwyMTMgNjUyLDIwNyA2NTYsMjA0IDY2MCwyMDYgNjY4LDIwMyA2NzgsMjAwIDY4NiwyMDMgNjkwLDE5OSA3MTUsMTk1IDcxMywxOTIgNzE0LDE4NiA3MTEsMTg4IDcwNSwxODggNjk0LDE4NSA2OTIsMTgwIDY4OCwxODMgNjg2LDE3OCA2NzIsMTc1IDY2NCwxODEgNjYzLDE3NiA2NTksMTc1IDY0MiwxNzIgNjQxLDE3MCA2MzQsMTY4IDYzNCwxNjAgNjMxLDE1NyA2MjUsMTU3IDYyNSwxNTUgNjE5LDE1NSA1OTcsMTU4IDU4NywxNjcgNTg5LDE3MSA1ODQsMTczIDU3NCwxODMgNTc0LDE4NiA1NjcsMTg4IDU2NSwxODkgNTc3LDE5MCA1NzksMTkzIDU3OCwxOTYgNTc1LDE5NiA1NjksMjAyIDU2NywyMDYgNTYyLDIxMCA1NjksMjE1IDU3MiwyMTcgNTc0LDIyNiB6IiAgLz4KPC9zdmc+) no-repeat;
}<div class=container>
<img class=back src="http://i67.tinypic.com/2h4b23k.jpg" alt=img>
<div class=color></div>
<img id=clip1 class=clipped src="http://i67.tinypic.com/2h4b23k.jpg" alt=img onClick="window.location.href = 'http://erca.org/'">
</div>
<svg width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="578 230,581 228,584 228,587 230,591 232,597 236,618 239,624 238,642 241,667 245,674 245,677 243,666 238,661 240,653 238,647 233,643 234,627 234,624 230,634 223,639 225,638 221,646 213,652 207,656 204,660 206,668 203,678 200,686 203,690 199,715 195,713 192,714 186,711 188,705 188,694 185,692 180,688 183,686 178,672 175,664 181,663 176,659 175,642 172,641 170,634 168,634 160,631 157,625 157,625 155,619 155,597 158,587 167,589 171,584 173,574 183,574 186,567 188,565 189,577 190,579 193,578 196,575 196,569 202,567 206,562 210,569 215,572 217,574 226">
</polygon>
</clipPath>
</svg>
2- SVG形状第二个片段，更简单：没有滤镜/剪辑路径的单张照片以及使用钢笔工具在Adobe Illustrator上制作的纯色svg形状：
#container {
position: relative;
}
svg {
position: absolute;
top: 0;
left: 0;
}
polygon {
cursor: pointer;
opacity: 0.6;
fill: green;
}
polygon:hover {
opacity: 0.8;
fill: red;
}<div id=container>
<img src="http://i67.tinypic.com/2h4b23k.jpg" alt=pic>
<svg x="0px" y="0px" width="900px" height="589px" viewBox="0 0 900 589">
<polygon onClick="window.location.href = 'http://erca.org/'" points="364.333,317.333 357,311 348,310.667 347,307.667 349.333,305.667 352.333,305 351.667,302.333
349.667,300.667 351,292.667 353,291 356.667,292.667 357.333,295 359.333,283.667 369,276.333 370.667,269.667 371,258.333
374.667,260 384,257.333 391.333,253.333 392.333,256.667 396.667,253.333 399.667,257 406,254 406.667,251.333 413.667,246.333
416.667,246.333 419.333,244.667 419.333,239.333 425,239.333 426,233 435,228.333 438.667,231 442,227 451.334,221.333 456,221
455,209.333 461.667,208 463.334,206 463.334,200.333 472,199 476.667,197.333 476.334,195 473.667,194 480.334,193 487.334,191
487.334,187 489.667,184 492.334,187 497,184.333 506,183 510.667,184 516.667,190.667 510,188.333 505.334,189.667 505,196
508.334,196.667 511.334,199 507.667,202.667 509,205 510.334,206.667 515.667,205.667 523,206.667 523.667,208 517.334,213.333
515,215.333 513,215.333 511.667,219.333 507.667,218.667 509,224 506,226.667 504.334,229.333 501,231.333 493.334,231.333
496,232.667 492.667,233.667 492.334,235.667 486.667,236.667 481,242.333 478,243.333 473,249.333 468,252.333 462,256.333
457.667,261 448.667,267.333 447.667,272.333 448,277.333 446,279.667 445,283.667 445,286.333 441.333,288.667 439.333,287
440.667,281 438.667,280.667 435,280.667 433,282.667 432.667,287 428.333,286.333 422.667,286.667 410.667,291 399.667,297
399.667,298.333 395.333,299.333 384.667,305.333 380.667,307 375.667,310.333 371,313 "/>
</svg></div>
3-多个SVG形状在此第3个片段中，Adobe Illustrator的“跟踪图像”功能自动生成了几个SVG路径。
#container {
position: relative;
}
svg {
position: absolute;
top: 0;
left: 0;
}
path {
cursor: pointer;
opacity: 0.6;
fill: green;
}
path:hover {
opacity: 0.8;
fill: red;
}<div id=container>
<img src="http://i67.tinypic.com/2h4b23k.jpg" alt=pic>
<svg x="0px" y="0px"
width="900px" height="589px" viewBox="0 0 900 589" >
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M621,1c-0.636,1.399-0.761,2.768-0.419,4.341
c1.288,5.921-1.485,9.547-7.905,10.679c-0.95,0.167-2.531,0.377-2.684,0.898c-1.604,5.508-4.256,2.165-6.962,1.147
c-4.679-1.76-5.131,3.151-6.943,5.281c-3.527,4.146-5.729,9.505-11.569,11.264c-1.419,0.428-1.953,1.404-2.299,2.891
c-0.71,3.05-2.289,5.953-2.643,9.017c-0.671,5.813-4.39,5.419-8.105,4.179c-2.642-0.881-3.365-0.332-3.359,2.167
c0.009,4.188-3.457,7.866-1.296,12.546c0.842,1.823,0.274,4.33-3.159,5.473c-2.983,0.992-3.423,4.852-2.261,7.854
c1.438,3.717-1.079,4.791-3.444,5.985c-2.556,1.289-5.006,2.491-7.343-0.882c-2.991-4.316-6.322-8.387-10.6-11.637
c-3.953-3.005-12.177-2.994-15.286,0.469c-0.489,0.545-0.911,1.771-0.633,2.284c1.83,3.369,0.619,7.16,1.848,10.807
c1.311,3.889-2.386,7.726-4.255,11.417c-1.538,3.039-3.374-0.044-5.052,0.043c-1.697,0.088-6.197-2.187-3.298,3.035
c1.008,1.814-0.603,1.767-1.466,2.357c-3.137,2.146-6.206,4.12-4.275,8.977c0.929,2.339-2.713,5.296,0.35,7.795
c1.486,1.213,1.08,2.853,1.468,4.281c1.473,5.423-0.634,8.65-4.091,12.339c-3.202,3.417-0.505,8.896-2.967,12.843
c-2.478,3.972-4.549,7.736-8.539,11.184c-7.964,6.881-18.967,4.844-26.576,11.621c-3.059,2.724-12.111,0.939-13.022-2.76
c-1.326-5.387-1.95-9.334-8.728-7.408c-0.107,0.03-0.533-0.488-0.539-0.758c-0.148-6.147-5.59-8.284-8.714-12.242
c-2.616-3.315-2.942-8.495-4.056-12.907c-0.349-1.38,1.187-1.665,2.218-2.233c9.833-5.427,20.175-10.22,25.302-21.328
c0.867-1.88,1.934-3.697,1.381-5.619c-1.202-4.176-0.723-8.294-0.009-12.382c1.189-6.809,0.988-13.581,0.194-20.396
c-1.816-15.602-1.411-31.279-1.292-46.932C460.038,17.966,458.553,9.496,457,1C511.667,1,566.333,1,621,1z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M654,1c-1.459,4.093-2.451,7.463,3.889,8.63
c2.641,0.486,0.557,4.53-0.251,5.708c-2.024,2.95-1.739,4.355,1.1,6.399c2.42,1.742,1.534,5.813-1.242,6.345
c-2.741,0.525-2.993,1.515-1.683,3.643c1.161,1.886,1.613,3.65-0.93,4.954c-1.075,0.552-1.649,1.594-1.379,2.938
c0.391,1.936,9.94,10.392,11.923,10.52c6.692,0.435,9.054,3.03,7.106,9.193c-0.749,2.37-0.68,4.82-1.629,7.093
c-1.699,4.071-0.15,6.377,3.749,6.83c-3.163,4.634-5.624,9.72-6.222,15.303c-0.681,6.361-4.133,10.502-9.287,13.319
c-4.215,2.305-4.483,2.578-0.778,6.031c1.454,1.354,3.263,2.433,4.394,4.008c1.738,2.422,5.572,3.85,2.437,8.526
c-2.145,3.198,2.735,5.244,4.477,7.81c3.456,5.092,8.597,8.285,13.326,11.952c2.838,2.2,1.724,6.142,3.908,8.83
c2.632,3.237,6.126,6.185,6.084,10.974l0.021-0.016c-1.344,0.014-2.687,0.027-4.03,0.041c-0.095-0.073-0.19-0.146-0.285-0.219
c0.11,0.058,0.222,0.115,0.332,0.173c1.663,1.468,3.472,2.84,3.64,5.426c-2.015,0.84-3.79-0.621-5.667-0.399
c-1.424-1.277-3.134-1.837-5.004-1.995c-0.725-1.096-1.695-1.817-3.024-1.996c-2.773-3.101-7.28-5.208-10.078-3.263
c-3.538,2.46-7.716,3.731-10.993,6.593c2.444-0.464,5.746-0.583,6.852-2.201c4.523-6.622,9.499-1.483,14.263-1.173
c0.352,1.656,1.682,1.832,3.019,1.996c1.328,1.516,3.094,1.933,5.001,1.997c0.26,1.08,0.169,2.573,1.901,2.287
c2.654-0.439,4.746,1.129,7.095,1.769l-0.063-0.059c0.33,0.332,0.66,0.665,0.99,0.997l0.078,0.086c0,1.824,0,3.648,0,5.474
c1.039-1.736,1.496-3.439,0.612-5.169c0.265-0.256,0.53-0.512,0.795-0.768c0.971,4.885,5.968,6.076,8.737,9.348
c1.701,2.01,5.149,2.066,7.431,1.447c5.988-1.624,11.214,1.253,16.764,1.999c2.883,0.388,5.468,1.907,8.689,1.217
c2.896-0.62,3.501,2.743,3.408,4.254c-0.146,2.39-0.949,6.021-4.659,4.932c-3.617-1.062-6.592-1.194-9.538,1.383
c-1.153,1.01-2.597,0.322-3.749-0.356c-3.121-1.843-6.277-3.152-10.535-0.404c2.106-7.662-3.097-6.917-6.721-7.154
c-5.736-0.376-11.12-0.367-15.694-5.201c-1.467-1.551-5.282-0.905-5.277-4.864c0.001-0.843-1.523-0.992-2.592-0.87
c-3.587,0.41-7.128,0.412-10.521-1.16c-1.245-0.577-3.062-0.892-3.768,0.189c-2.468,3.775-4.699,1.733-7.863,0.856
c-6.231-1.727-12.831-2.236-19.316-2.854c-1.343-0.128-2.2-0.072-2.614-1.35c-0.708-2.185-2.231-2.735-4.406-3.288
c-3.385-0.861-3.124-4.222-3.127-6.961c-0.004-4.049-1.406-6.059-5.722-4.599c-0.312,0.105-0.788,0.417-0.902,0.315
c-5.343-4.809-10.547-0.277-15.832,0.099c-4.289,0.306-8.663,0.191-12.938-0.293c-3.081-0.35-3.781-7.101-0.749-9.654
c3.717-3.13,4.754-5.617,0.393-9.094c-1.753-1.397-1.614-4.155-1.551-6.44c0.078-2.83-0.568-4.931-4.012-4.703
c-5.134,0.34-7.73-3.567-10.224-6.853c-1.228-1.618-2.159-3.59-3.654-5.145c-0.934-0.971-1.568-1.847-0.232-3.351
c2.548-2.866,1.308-5.649-2.715-5.854c-2.35-0.119-3.493,0.116-2.215-2.814c1.361-3.121-2.762-1.951-3.471-3.714
c0.292-0.406,0.546-0.818,0.856-1.184c1.353-1.589,5.25-1.969,3.479-4.977c-1.381-2.346-4.454-1.646-6.904-1.001
c-1.11,0.293-2.152,0.845-3.352,1.33c-0.644-1.307-1.034-2.764-0.384-3.741c2.414-3.624,3.686-6.994,0.554-11.017
c-0.921-1.184-1.085-3.425,1.324-4.537c4.451-2.056,5.894-5.44,4.704-10.28c-1.581-6.427,1.897-10.801,8.45-9.804
c4.261,0.648,4.884-0.493,5.07-4.514c0.135-2.928,0.716-6.037,1.264-9.032c0.223-1.219,0.521-2.85,1.933-3.322
c6.363-2.13,9.415-7.516,12.709-12.674c2.687-4.207,5.984-2.49,9.011-0.744c2.817,1.627,4.507,2.378,3.991-2.127
c-0.485-4.242,3.521-2.279,4.419-2.089c2.909,0.618,4.872,1.149,4.632-2.914c-0.09-1.516,1.628-2.002,2.318-3.101
c0.68-1.083,2.357-2.304,1.431-3.446c-3.565-4.395-0.121-5.811,2.851-7.572C627.85,1.771,627.88,1.309,628,1
C636.667,1,645.333,1,654,1z M627.774,96.561c0.114,0.042,0.229,0.084,0.344,0.126c-0.078-0.141-0.156-0.28-0.234-0.421
C627.847,96.364,627.811,96.462,627.774,96.561z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M802,1c-0.426,3.974-5.394,6.576-9.513,4.525
c-2.843-1.416-5.139-2.34-7.427,0.611c-0.272,0.351-0.907,0.709-1.295,0.638c-7.041-1.294-11.535,5.22-17.9,5.816
c-5.02,0.472-9.374,2.919-14.091,4.253c-1.397,0.396-3.277,0.732-4.415,0.124c-6.881-3.686-12.454,0.396-18.314,2.767
c-1.063,0.431-2.364,1.708-3.163,0.877c-5.367-5.586-12.122-0.241-17.975-2.441c-2.52-0.947-5.66-0.19-7.36-3.167
c-0.561-0.981-1.691-1.009-2.686-0.942c-5.136,0.341-10.402,0.158-15.354,1.314c-3.036,0.708-5.997,2.834-8.817,4.229
c-4.017,1.989-7.229,0.527-10.744,0.866c-4.286-0.727-4.203-3.537-2.052-5.922c3.287-3.644,0.969-5.944-1.745-7.097
C655.403,5.862,655.939,3.73,657,1C705.333,1,753.667,1,802,1z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M377.034,231.039c-2.095,0.656-3.039,3.054-5.38,3.424
c-2.867,0.452-4.274-0.133-6.533-2.822c-5.705-6.793-0.559-12.35,0.548-18.314c0.729-3.926,2.179-7.622-0.117-11.549
c-0.699-1.194-0.134-2.814,0.318-4.324c1.044-3.481,2.462-6.877,2.575-10.63c0.122-4.067,1.5-7.21,5.979-8.651
c3.294-1.061,2.326-4.714,1.17-6.239c-2.172-2.869-0.053-2.504,1.445-2.82c6.979-1.472,14.012-2.721,20.936-4.414
c3.675-0.899,7.367-2.261,8.507-6.67c0.492-1.906,2.325-2.103,3.78-2.874c6.585-3.492,11.701-8.476,14.175-15.628
c0.865-2.503,2.878-1.622,4.336-2.19c1.428-0.558,1.915,0.805,2.176,2.029c0.552,2.598,1.178,5.18,1.694,7.784
c0.618,3.117,2.132,5.284,5.343,6.337c3.519,1.155,4.234,4.119,2.619,6.945c-1.763,3.084-0.617,3.779,2.129,4.005
c0.644,0.053,1.305-0.149,1.956-0.142c2.082,0.025,5.723,2.936,6.368,5.051c0.461,1.512,9.039,7.033,10.531,6.388
c2.639-1.14,5.846-0.763,8.066-2.167c8.357-5.285,18.569-5.563,27.011-10.479c2.251-1.312,2.41-3.805,3.597-5.709
c0.754-1.209,1.065-3.389,2.81-2.681c1.51,0.612,0.878,2.709,0.437,4.062c-2.568,7.857-6.248,15.012-13.566,19.557
c-2.477,1.537-3.346,3.274-2.438,6.223c1.071,3.481-1.568,6.72-5.221,7.573c-3.253,0.761-7.87-0.61-8.115,5.45
c-0.077,1.902-3.144,2.633-5.504,2.255c-3.302-0.53-5.572,0.272-5.774,4.181c-0.117,2.289-1.632,3.772-3.832,3.941
c-3.197,0.245-4.688,1.791-4.033,4.839c1.794,8.363-5.457,9.4-9.985,12.746c-4.739,3.501-10.943,3.074-15.83,6.216
c-1.899,1.221-3.715,2.204-4.005,4.671c-0.039,0.331-0.063,0.933-0.162,0.948c-5.838,0.88-6.214,8.414-11.737,9.628
c-3.102,0.682-5.476,2.481-7.102,5.074c-0.792,1.264-1.602,2.465-2.996,1.985c-3.834-1.317-7.611,1.294-11.419-0.066
c-0.672-0.24-1.992-0.089-2.325,0.375c-2.836,3.949-7.436,3.187-11.277,4.403c-0.766,0.242-1.604,0.511-2.373,0.428
c-1.097-0.119-3.534-9.888-2.905-10.821c0.732-1.088,2.352-1.452,1.698-3.641c-2.19-7.343-0.208-9.713,7.658-9.866
c0.329-0.007,0.658-0.058,1.825-0.165c-1.998-0.509-3.245-0.782-4.464-1.149c-1.291-0.389-2.6-0.821-2.635-2.54
c2.291-3.906,0.413-6.242-3.01-7.998c-0.688-2.771,3.086-4.252,1.998-7.552c-1.996,2.396-4.075,4.355-1.954,7.513
C374.69,225.783,378.237,227.526,377.034,231.039z M409.229,234.246c-0.189-0.194-0.381-0.386-0.576-0.574
c0.108-0.894,0.216-1.787,0.323-2.681l0.172-0.143l-0.137,0.177c-6.573,4.952-13.984,5.702-21.92,3.872
c9.794,3.404,19.137,1.464,29.509-1.315C413.275,232.726,411.271,233.622,409.229,234.246z M387.193,211.881
c-7.218-1.396-7.218-1.396-8.229,2.738C381.812,213.672,384.503,212.776,387.193,211.881z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M558.16,88.179c0.58,6.603,0.58,6.603,11.612,5.345
c-0.596,1.087-1.541,1.646-2.642,2.118c-3.789,1.623-4.415,3.504-0.313,5.597c0.927,0.473,1.911,1.089,1.866,2.149
c-0.244,5.699,3.357,5.012,7.987,3.74c-5.516,7.755,1.912,11.103,4.421,15.652c1.604,2.908,3.72,7.709,9.146,6.74
c1.13-0.202,1.565,1.131,1.777,2.093c0.788,3.561,1.402,7.103,5.055,9.188c1.153,0.658,0.195,1.628-0.682,2.294
c-4.853,3.684-5.207,8.313-2.829,13.549c0.32,0.705,0.546,2.151,0.246,2.338c-5.873,3.652-6.453,11.752-12.69,15.039
c-3.34,1.76-5.692,4.687-7.738,7.604c-2.935,4.185-5.099,4.87-9.127,1.652c-3.963-3.165-14.702-3.195-19.99-0.743
c-2.924,1.355-6.414,1.97-9.663,2.021c-4.246,0.066-7.815,1.783-11.196,3.74c-2.596,1.503-4.641,1.232-6.088-0.761
c-5.609-7.726-13.104-5.796-20.268-3.843c-2.964,0.808-4.958,0.415-7.528-1.492c2.348-1.879,4.751-3.54,6.845-5.526
c6.834-6.485,9.552-14.298,9.787-23.916c0.16-6.58-1.96-14.657,5.369-19.678c2.277-1.56,1.857-11.045,0.605-13.203
c-2.896-4.989-3.097-10.98,0.854-14.332c2.201-1.867,3.317-6.591,8.07-4.635c0.898,0.37,1.736-1.261,2.505-2.146
c5.018-5.775,5.704-12.458,4.448-19.652c-0.864-4.953,1.776-7.305,6.898-6.422c4.947,0.853,7.105,5.112,10.169,8.236
c1.735,1.77,3.185,3.815,4.791,5.713c2.301,2.718,4.82,4.041,7.926,1.115C557.91,87.896,558.035,88.036,558.16,88.179z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M350.393,309.262c4.419-1.638,4.624-4.51,3.326-8.054
c-0.846-2.309-0.276-4.546,1.089-7.227c3.142,4.104,4.908,2.597,5.589-1.303c0.882-5.046,2.727-8.743,7.496-11.918
c4.146-2.761,6.746-8.107,5.562-14.072c-0.509-2.563-0.416-4.323,3.442-4.89c3.93-0.576,8.261-0.77,11.842-3.1
c0.921-0.599,1.629-1.023,2.481,0.146c0.331,0.454,1.567,0.897,1.64,0.799c3.882-5.332,10.535-1.058,15.475-4.889
c5.665-4.393,6.402-3.441,13.354-12.226c0.786-0.994,1.914-1.268,3.091-1.404c1.672-0.193,2.61-1.086,3.171-2.71
c1.667-4.835,5.245-6.225,10.439-6.523c4.248-0.244,7.716-3.642,11.396-5.885c0.546-0.333,0.856-1.03,1.369-1.443
c4.185-3.368,6.484-6.305,6.863-11.347c0.355-4.721,5.65-2.063,6.678-5.301c0.909-2.864,0.884-6.229,5.748-5.824
c3.486,0.29,6.877-1.422,7.921-5.38c0.597-2.265,2.29-2.107,3.864-2.336c3.451-0.501,7.196-0.484,7.258-5.517
c0.009-0.767,0.895-1.751,1.735-1.427c5.754,2.215,10.214-2.694,15.611-2.779c1.977-0.03,3.449,0.037,4.005,1.733
c0.846,2.582-1.8,1.626-2.84,2.216c-2.492,1.414-4.876,3.53-8.354,2.04c4.377,2.044,4.959,8.251,11.049,8.428
c-1.296,2.432-2.811,4.452-1.098,7c1.335,1.984,2.342,3.337,5.125,2.377c2.433-0.84,5.12-0.938,8.275,0.446
c-4.607,3.379-9.447,5.452-12.699,9.595c-0.734,0.935-1.441,1.717-1.671,2.921c-1.178,6.172-4.55,8.858-10.574,10.728
c-4.596,1.426-9.162,3.742-13,6.644c-8.216,6.212-15.94,13.071-23.895,19.631c-1.024,0.844-2.416,1.426-2.46,2.938
c-0.069,2.388-1.465,2.591-3.359,2.468c-2.561-0.168-4.239,1.68-6.157,2.95c-0.749,0.496-1.497,1.377-0.54,1.926
c3.563,2.045,0.965,5.43,1.806,8.101c0.77,2.445-1.615,4.237-4.186,4.567c-2.425,0.312-4.978,0.627-7.34,0.198
c-3.26-0.591-5.939-1.114-6.6,3.301c-0.185,1.238-1.322,1.726-2.702,1.635c-9.302-0.614-17.793,2.171-25.235,7.385
c-7.75,5.429-16.35,9.031-24.742,13.12c-4.212,2.052-8.158,4.461-11.301,7.978c-1.176,1.314-2.453,2.025-3.782,0.663
c-1.841-1.886-3.265-4.035-6.116-4.823C355.919,310.118,353.311,309.975,350.393,309.262z M468.999,218.988
c1.001,0.698,1.862,1.837,3.442,1.094c-0.89-1.531-2.38-0.634-3.478-1.051c-0.396-1.292-1.165-1.987-2.517-1.309
c-1.877,0.942-1.081,2.832-1.408,4.322c-3.108,0.046-4.899,3.008-7.782,3.53c-3.745,0.68-5.836,3.165-7.214,6.466
c-1.074,0.314-2.266-1.008-3.461,0.171c1.362,1.046,2.424,0.786,3.418-0.226c1.956-0.921,4.771-1.086,5.934-2.24
c3.658-3.636,3.368-3.929,8.174-1.98c-0.5-2.164-1.235-4.308,0.874-5.769C466.076,220.669,466.365,218.264,468.999,218.988z
M442.853,234.325c-0.278,0-0.557-0.003-0.834,0.014c-0.008,0-0.004,0.202-0.006,0.311c0.278,0.001,0.557,0.002,0.835,0.003
C442.848,234.544,442.848,234.435,442.853,234.325z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M573.974,217.017c1.159-2.683,2.744-5.366-0.009-8.045
c0.269-0.069,0.536-0.14,0.805-0.209c-0.074-0.117-0.147-0.234-0.221-0.352c-0.182,0.202-0.362,0.404-0.543,0.607
c-0.798,0.211-1.949,0.158-2.337,0.677c-2.41,3.228-4.624,2.451-6.951-0.354c1.768-1.251,4.003-1.907,4.234-5.118
c0.172-2.383,2.715-5.166,5.033-5.743c3.841-0.956,6.362-3.646,6.6-6.496c0.246-2.954-3.771-3.951-6.67-4.84
c2.941-6.566,7.265-11.184,14.091-13.003c1.752-0.468,2.443-1.596,1.435-2.852c-2.139-2.663-0.05-3.9,1.464-5.31
c2.042-1.9,4.526-3.252,5.878-5.959c0.886-1.774,2.989-1.038,4.591-0.962c7.021,0.333,13.999,0.298,20.709-2.2
c1.218-0.454,1.404,0.436,1.737,1.133c0.622,1.304,1.653,2.67,3.015,1.871c4.936-2.895,3.765,1.031,3.946,3.377
c0.304,3.905,0.256,7.996,5.841,8.061c1.186,0.014,1.593,0.96,2.162,1.804c1.534,2.273,2.595,6.38,6.244,1.836
c0.227-0.282,1.499,0.203,2.255,0.43c3.957,1.189,7.976,1.885,12.128,1.791c0.931-0.021,2.263-0.511,2.741,0.585
c2.43,5.561,5.165,3.19,7.707,0.266c1.457-1.676,2.832-1.9,4.793-1.099c1.984,0.811,4.041,1.465,6.285,1.301
c1.843-0.134,2.796,1.134,4.205,2.23c4.011,3.12,8.975,4.98,13.386,7.632c3.545,2.132,7.832,0.371,11.256,2.544
c0.813,0.517,2.496-1.585,2.414,0.659c-0.039,1.073-0.617,2.479-2.313,2.861c-3.234,0.73-6.379,1.856-9.61,2.604
c-5.912,1.367-11.822,2.834-17.811,3.752c-3.203,0.491-8.96,0.853-9.421-0.334c-1.483-3.827-5.156-3.897-7.356-6.106
c-0.124-0.124-0.563,0.064-1.051,0.138c-0.447,2.492,2.271,1.789,3.16,2.953c0.985,1.289,3.781,1.411,3.003,3.851
c-0.718,2.249-3.001,1.57-4.756,1.697c-4.282,0.309-8.638-0.457-12.825,1.288c-2.045,0.852-3.523,1.884-4.976,3.721
c-3.333,4.217-6.671,9.107-11.186,11.519c-4.335,2.316-8.171,5.2-12.202,7.833c-2.721,1.778-4.488,4.386-2.629,8.022
c1.278,2.5-0.518,2.971-2.365,2.827c-11.115-0.863-22.184-1.949-31.722-8.644c-2.586-1.815-5.273-3.12-8.625-3.242
c-7.425-0.271-8.035-1.439-5.496-9.043c0.579,2.534,3.426,2.889,4.67,4.851c0.555,0.875-2.536,1.679,0.07,2.108
c0.718,0.119,1.671-0.299,1.881-1.273c0.228-1.056-0.08-1.987-1.053-2.544C577.73,219.056,575.846,218.047,573.974,217.017z
M581.986,200.97c0.332-0.332,0.665-0.665,0.998-0.998c4.132-3.227,6.46-8.467,12.001-10.121
c-7.747,2.024-7.747,2.024-11.958,10.164c-0.332,0.333-0.666,0.665-0.999,0.998c-0.339,0.338-0.678,0.677-1.018,1.015
c-0.323,0.67-0.647,1.339-0.972,2.009c-0.681,0.324-1.361,0.649-2.041,0.975c-0.031,0.312-0.916,0.401-0.233,0.897
c0.065-0.314,0.131-0.629,0.197-0.942c0.679-0.327,1.356-0.655,2.035-0.982c0.325-0.665,0.65-1.33,0.976-1.995
C581.311,201.648,581.648,201.31,581.986,200.97z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M359.599,337.555c-2.142-3.257-3.584-5.479-5.056-7.683
c-3.299-4.94-10.645-7.911-16.383-6.871c-4.896,0.887-9.532,2.402-13.899,4.784c-4.921,2.684-10.783,1.667-15.843,3.952
c-0.69,0.312-1.986-0.265-2.803-0.758c-6.143-3.711-12.589-6.699-19.409-8.976c-2.101-0.701-3.59-2.31-2.139-5.079
c1.509-2.88-0.795-5.964-0.097-8.819c1.407-5.754,1.661-11.479,1.605-17.392c-0.034-3.599,0.883-8.313,6.78-7.685
c0.722,0.077,1.726-0.262,2.235-0.772c4.94-4.941,13.406-5.865,19.976-3.15c5.89,2.435,12.251,5.232,18.362,5.139
c4.632-0.072,10.009-0.016,14.51-1.907c3.706-1.556,7.154-0.385,10.695-0.696c1.726-0.151,1.946,0.883,1.729,2.204
c-0.35,2.135-0.716,4.269-1.144,6.39c-0.229,1.14-0.317,2.454-2.16,1.289c-3.146-1.989-4.191,0.369-4.837,2.748
c-0.472,1.74-0.745,3.618-0.646,5.409c0.152,2.749,0.814,5.381-2.798,6.656c-1.145,0.404-1.731,2.048-0.965,3.479
c0.856,1.602,2.248,2.397,4.08,2.381c4.199-0.04,7.746,1.26,10.674,4.473c1.636,1.796,2.764,3.573,1.346,5.71
C360.557,326.688,360.754,331.77,359.599,337.555z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M541.897,223.594c-3.604,0.122-7.297,0.694-10.816-0.561
c-5.817-2.074-11.211,0.934-16.826,1.188c-1.28,0.058-2.6,1.087-3.253-0.841c-0.505-1.493,0.432-2.113,1.417-3.187
c3.281-3.573,7.521-5.716,11.332-8.491c1.007-0.732,2.707-1.17,2.341-2.856c-0.393-1.804-1.928-2.77-3.62-2.958
c-2.467-0.275-4.972-0.215-7.461-0.262c-2.909-0.054-4.855-0.672-2.687-4.082c1.311-2.062,1.185-3.836-1.397-4.709
c-1.893-0.64-4.271-0.857-3.526-3.724c0.787-3.029,4.292-3.276,5.672-2.524c6.29,3.427,11,0.154,16.242-2.471
c4.63-2.318,10.469-0.52,14.932-2.778c3.862-1.955,7.172-3.44,11.502-2.286c2.143,0.571,4.03,1.374,6.358,2.927
c-3.896,1.44-7.563,1.757-10.987,3.326c-7.2,3.302-12.261,8.819-17.555,14.205c-2.596,2.64-2.939,6.886,0.041,8.116
c4.356,1.797,3.778,6.981,7.686,8.622C542.083,220.581,542.348,222.236,541.897,223.594z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M553.266,210.74c1.375,4.441,4.651,7.87,6.453,12.037
c-9.276,3.021-16.313-0.348-19.465-9.296c-0.489-1.389-1.227-2.224-2.675-2.618c-3.632-0.988-3.353-4.164-1.764-5.849
c7.02-7.442,14.258-15.02,25.419-15.558c4.25-0.205,8.46,2.007,12.905,0.556c1.266-0.413,2.682,0.501,2.996,2.034
c0.327,1.595-1.028,2.82-2.067,3.037c-5.313,1.104-6.646,6.026-9.528,9.445c-0.416,0.493-0.531,1.238-0.945,1.733
c-1.026,1.229-4.618,0.979-3.122,3.356c1.208,1.918,2.093,4.865,5.429,5.125c3.201,0.249,3.031,3.473,3.738,5.578
c0.418,1.244-0.271,3.252-2.216,3.245c-2.49-0.009-5.436,1.354-7.225-1.712c-2.014-3.449-4.002-6.913-6.003-10.369
C554.856,210.899,554.445,210.425,553.266,210.74z M546.033,213.039c-1.264,1.095-1.085,2.113,0.369,3.304
c-0.156-1.266-0.285-2.304-0.414-3.342c0.182-0.222,0.381-0.433,0.534-0.673c0.04-0.062-0.063-0.214-0.1-0.325
C546.293,212.349,546.163,212.693,546.033,213.039z M549.6,205.654c-2.092-0.381-4.03,0.289-5.804,1.431
c-0.07,0.045,0.332,1.353,0.765,1.566C547.44,210.073,547.553,206.323,549.6,205.654z"/>
</svg>
</div>
答案 2 :(得分：0)
你可以试试一个imagemap吗？它们非常轻巧，现在有很多易于使用的生成器：https://www.image-maps.com/