gpt4 book ai didi

javascript - 使用 svg 和 javascript 的交互式 map

转载 作者:太空宇宙 更新时间:2023-11-03 18:08:20 25 4
gpt4 key购买 nike

我对 svg 图像真的很陌生,我想用几个 svg 图像制作一个交互式 map ,然后将每个图像(路径)链接到一个区域。我怎样才能做到这一点?

如果有人可以帮助我,那就太好了!

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="450px" height="600px" viewBox="0 10 500 700" enable-background="new 0 0 500 700" xml:space="preserve">

<path id="mapa" fill="#75B6F3" d="M127.75,39.721l-0.452-1.761l-0.452-2.484l-0.09-2.304l0.046-1.581l0.316-1.852l0.542-1.536l1.039-1.625
c0,0,0.226-0.316,0.813-0.497c0.586-0.18,1.354-0.587,1.671-0.587c0.317,0,0.678-0.361,1.039-0.542
c0.361-0.181,1.491-1.084,1.491-1.084s0.542-0.678,0.678-1.175s0.181-1.4,0.09-1.717c-0.09-0.316-0.09-0.994-0.136-1.4
c-0.045-0.407-0.181-0.768-0.045-1.129c0.135-0.361,0.181-0.722,0.587-0.994c0.407-0.271,0.406-0.633,1.039-0.678
c0.632-0.045,0.723-0.271,1.4,0.135c0.678,0.407,1.084,0.813,1.31,0.903c0.226,0.091,0.723,0.316,1.355,0.723
c0.633,0.407,0.858,0.769,1.311,1.265c0.451,0.497,0.451,0.587,0.994,1.174c0.542,0.587,1.31,1.22,1.4,1.717
c0.09,0.497,0,1.355,0.09,1.761c0.09,0.407-0.091,1.808-0.046,1.943c0.046,0.136,0.136,1.084,0.362,1.581
c0.226,0.497,0.362,1.039,0.587,1.582c0.226,0.542,0.498,0.993,0.723,1.446c0.225,0.451,0.497,0.361,0.587,0.993
c0.091,0.632-0.181,2.484-0.181,2.801c0,0.316-0.001,0.452-0.182,0.993c-0.181,0.542-0.768,1.04-1.038,0.994
c-0.271-0.045-0.949,0.587-1.22,0.542c-0.271-0.044-1.129,0.362-1.355,0.588c-0.226,0.226-0.316,0.678-0.813,0.723
c-0.497,0.044-2.395-0.316-2.53-0.407c-0.135-0.09-0.286-0.888-0.497-1.31c-0.225-0.453-1.31-0.453-1.942-0.588
c-0.633-0.136-1.988,0.271-2.349,0.271s-1.762,1.355-1.852,1.626c-0.09,0.271-0.316,0.452-0.497,0.722
c-0.18,0.272-0.361,0.588-0.768,0.678"/></a>
<path fill="#75B6F3" d="M129.51,71.354l-0.79-3.439l0.125-2.917l0.107-5.683l-0.037-2.885l0.817-0.404l-0.043-3.158l0.453-2.8
l0.407-1.081l-0.813-0.587l-0.949-0.768l0.858-1.084l0.361-1.037l-0.542-1.129l-0.587-0.723l-0.497-1.264l0.045-0.858l0.317-0.584
L130.324,41h0.904l0.768-0.563l1.084-1.031l1.4-1.125l1.807-0.631l1.31,0.318c0,0,1.13,0.406,1.446,0.678
c0.316,0.271,1.084,0.858,1.084,0.858l1.084,0.362l0.993-0.768l0.903-0.589l1.401-0.902l1.536,0.045l1.716,1.355l3.75,3.976
l0.225,1.626c0,0,0.452,1.219-0.315,2.078c-0.77,0.858-1.943,1.491-1.943,1.491l-0.09,1.174l0.632,0.813l0.407,1.175l-0.181,1.355
l-0.542,0.768l-0.949,0.904c0,0-0.542,1.4-0.542,1.536s0.498,2.168,0.498,2.168l3.479,5.42l0.632,1.265l-0.497,1.22l-2.891,4.337
l-5.104,0.09l-0.588,0.768l-0.632,0.451l-3.252-0.09l-0.632,0.904l-0.904,0.259L137.506,73h-0.858l-1.175-1.429
c0,0-0.902,0.274-1.445,0.274s-2.531-0.065-3.027-0.111C130.505,71.688,129.51,71.354,129.51,71.354z"/>
<path fill="#75B6F3" d="M122.599,139.678l-1.107-3.563l0.171-1.828l1.98-3.804l1.263-3.709l0.088-4.25l0.271-2.44l-0.453-3.794
l0.271-4.609l0.271-2.259l0.722-4.244l-0.09-2.62L124,101.744l0.362-4.968l2.258-0.542l1.175-6.413l0.362-5.42l0.361-2.079
l0.813-1.716l0.453-3.071l0.451-2.439l0.091-0.813l7.047,0.181l0.632,1.626l1.625-0.547L140.262,74h3.433l2.079-1h4.426l1.265-1.072
l1.084-1.397l0.632-1.738l1.815-0.056L156,71.21v2.887l0.623,1.992l1.667,1.626l1.014,1.898l0.37,2.981l0.187,2.62l0.274,3.705
l0.633,2.168l0.633,3.253l0.723,1.414c0,0,5.963-0.754,6.233-0.754c0.271,0,1.356,0,1.356,0s0.542,1.027,0.542,1.659
c0,0.633-0.812,5.436-0.812,5.436l-0.633,3.124c0,0-1.626,2.963-1.716,3.234c-0.091,0.27-1.808,3.241-1.808,3.241l-1.897,2.074
l-3.343,0.629c0,0-3.252,2.077-3.523,2.348c-0.27,0.271-3.523,2.439-3.523,2.71s-1.988,2.619-1.988,2.619l0.903,1.716l-0.722,4.788
l-1.807,0.542l-3.524,0.09c0,0-1.807,1.084-1.897,1.355c-0.09,0.272-2.529,1.808-2.529,1.808l-2.982,0.271
c0,0-1.083,1.716-1.717,1.896c-0.632,0.181-3.162,0.633-3.162,0.633l-1.807-0.723l-0.723,1.175l-2.168,0.723l-2.348,0.542
l-3.252,2.35L122.599,139.678z"/>
<path fill="#75B6F3" d="M113.068,181.63l0.423-2.676l1.508-2.27v-2.304l1.202-0.945l0.796-2.435h0.678l0.51-6.576l2.814-2.918
v-5.557l0.235-1.22l0.931-1.626l0.6-2.032l0.504-3.795l0.388-1.627l0.532-2.981l-0.546-0.542l-0.138-1.219l0.947-0.136l0.948-1.084
l0.813-1.22l0.542-0.542l1.492-0.271l0.135-0.542l2.71-0.014l0.271-1.099h0.948l1.22-0.731l2.168,0.245l1.355,0.597l0.271-0.623
l0.813-0.487H140v-0.733l1-0.135v-0.949l3.244-0.542l2.707-2.168l2.573-0.136l0.203,1.762l1.185,3.659l0.66,2.71l0.668,2.304
l-0.139,1.355c0,0-0.68,1.083-0.816,2.303c-0.135,1.22-0.407,1.897-0.407,1.897l0.134,1.355l0.949,1.762l1.219,2.168
c0,0-0.677,2.169-0.136,2.169c0.543,0-1.354,1.626-1.354,1.626l-2.304,0.406l-2.846,1.22l-2.439,2.168l-0.678,2.711l-0.406,2.439
l-2.44,2.575l-1.762,3.387l-4.201,3.794l-0.271,3.659l-0.813,3.93l-1.355,2.033l-0.271,2.574l-0.813,1.22l-1.897-0.135l-1.762-0.542
l-1.355-2.032l-0.135-1.491l-0.136-0.865L124.858,182h-3.388l-1.355,1.204l-1.626,1.212l-2.033-2.104L113.068,181.63z"/>
<path fill="#75B6F3" d="M113.159,226l-0.949-1.102l-0.384-4.073l-0.236-1.181l-0.074-1.31l-0.534-0.173l0.099-2.162h-0.452
l-0.452-6.354l-0.09-0.694l-0.361-2.965l-0.271-0.093L109.273,203h0.271l0.452-2.113l0.361-0.515l0.994-1.297l0.993-0.513
l0.723-1.294l0.451-1.643l0.181-1.814l0.452-1.63l-0.528-2.621l0.375-0.544v-2.168v-0.542v-1.084l-0.42-0.542l1.641-0.18
l1.272,1.083l0.771,0.844l0.501,0.574h0.452l1.265-1.522l1.265-1.212l0.904-0.471l0.903-0.371l1.536,0.176l0.271,1.624l0.271,1.264
l0.362,1.264l0.813,0.543l0.994,0.542l1.536,0.541l1.716,0.542l0.542-0.362l0.542,0.633l0.181,1.174l0.091,7.679
c0,0-1.897,2.259-2.169,2.439c-0.271,0.181-1.807,3.252-1.807,3.252l-0.542,2.079l-0.452,1.716l-0.904,1.717
c0,0-1.355,2.98-1.355,3.432c0,0.451-0.452,2.349-0.271,3.253c0.181,0.903,0.813,3.071,0.813,3.071l1.355,1.806l1.319,1.085
L127,223.708v1.085l0.036,1.174l0.152,0.903l-0.555,0.813l-1.362-1.252L123.91,225h-0.271l-1.265-0.917l-1.807,0.128l-0.271,0.697
l-0.723-0.284l-0.452-0.369l-2.078-0.093l-0.813,0.812l-0.995,0.242L114.243,226H113.159z"/>
<path fill="#75B6F3" d="M109.951,249.253l1.152-2.066l0.576-1.169l-0.254-2.617l-0.398-1.783l0.14-1.908l0.815-2.038l1.356-2.578
l0.332-0.814l0.331-2.305v-0.678l-0.601-1.084l0.242-0.813l0.518-1.22L114,227.367V227h-0.119l1.355,0.793
c0,0,0.678-0.281,1.085-0.551c0.407-0.271,1.626-0.819,1.626-0.819l2.575-0.408l1.22,0.27l3.117,0.406l1.084,1.154l0.949,1.156
h1.084l1.355-0.206l-0.271,4.233l-0.542,1.913l1.084,2.176l-0.271,1.767l0.949,2.441c0,0-2.304,0.271-2.71,0.136
c-0.407-0.135-3.117-2.168-3.117-2.168l-3.523-0.406l-2.981,0.678l-0.407,2.71l-1.897,1.627l-0.677,2.032l-0.949,2.71l-0.813,2.304
l-1.49-0.678L109.951,249.253z"/>
<polygon fill="#75B6F3" points="114.355,250.066 115.406,248.406 115.863,246.356 117.108,244.315 117.798,243.634 118.076,242.141
119.027,240.784 120.927,240.106 123.638,240.376 125.942,242.138 127.162,242.816 129.195,242.681 131.499,242.816
133.125,243.358 133.808,244.983 133,247.83 133,250.269 132.656,251.625 132.213,253.251 132.059,256.097 131.508,257.452
131.097,258.401 130.01,257.181 129.196,257.045 128.653,254.741 127.298,253.521 126.349,252.031 125.129,251.76 123.097,251.204
121.199,252 118.76,252 116.592,251.407 114.423,250.431 "/>
<path fill="#75B6F3" d="M105.039,265.548l-0.051-2.659l0.753-0.686l0.208-2.106l0.205-1.695l0.272-0.745l0.611-0.951l0.542-1.559
l0.339-2.304c0,0,0.203-0.406,0.475-0.406c0.271,0,1.762,0.067,1.762,0.067l1.626,0.543l1.558,0.407l1.83,0.135l0.677,0.61
l1.22,0.542l1.084,0.339l1.355,0.338l0.881,0.068l0.813-0.542l1.017,0.096L123.3,255h2.507l0.678,0.345l1.423,0.85l0.203,0.695
l0.475,1.568l0.542,0.784l1.152,0.798l0.271,1.89c0,0-0.271-0.071-0.542,0.402c-0.271,0.475-1.016,1.558-1.083,1.761
c-0.067,0.204-0.746,1.828-0.746,1.828l-0.746,1.558l-0.338,1.22c0,0-1.355,0.61-1.626,0.677c-0.271,0.068-2.371,0.339-2.371,0.339
l-0.881-0.61l-1.356-0.813l-1.287-0.406c0,0-1.423-0.204-1.83-0.271c-0.406-0.068-3.591-0.068-3.591-0.068l-1.762,1.49l-0.746,0.475
l-1.694,0.271l-0.813-1.491l-0.881-1.626l-0.813-0.542l-2.236-0.204L105.039,265.548z"/>
<path fill="#75B6F3" d="M96.671,284.657c0,0,1.05-0.966,1.253-1.101c0.203-0.135,1.372-0.957,1.372-0.957l-0.229-2.376l-0.317-0.341
l0.621-0.476l0.683-0.813c0,0,0.273-0.948,0.544-1.084c0.271-0.135,0.814-2.1,0.814-2.1l0.747-1.288l0.61-1.219l0.813-1.492
l0.61-1.558l0.61-0.88l1.694-0.271l0.949,0.542l1.017,0.811l0.406,0.947h0.678h1.083l1.355-0.61l1.288-0.33l2.574-0.06h3.457
l1.288,0.638l1.016,0.962l0.949,0.921l0.745-0.317l0.61-0.601l1.219-0.197l0.271,1.019l-0.338,0.679l-0.61,0.948l-0.813,0.272
l-0.339,0.746l0.339,0.677l0.474,0.881l0.204,1.152l-0.136,1.558l0.067,2.033l0.136,0.947l0.339,0.408l0.136,0.949l-0.542,0.338
c0,0-0.813,0.61-0.678,1.017c0.135,0.406,0.474,1.423,0.474,1.423s-0.271,0.474-0.406,0.88c-0.136,0.407-0.61,1.423-0.61,1.423
l-0.475,1.423l-0.677,0.91L120.318,292h-1.559l-0.745-0.063l-0.542-0.473l-0.542-0.541l-0.474-1.117l-1.084-0.118
c0,0-0.136,0.347-0.339,0.483c-0.203,0.136-1.084,0.585-1.084,0.585L113.204,291h-1.49l-0.678-0.714l-1.355-0.562l-1.559-0.551
l-1.084-0.141l-0.745-0.95l-2.439-0.069l-0.339,0.338l-1.423,0.271l-0.746-0.949l-0.135-0.745l-1.152-0.679l-0.88-0.271l-1.83-0.203
L96.671,284.657z"/>
<path fill="#75B6F3" d="M91.235,319.823l-1.416-0.288l0.105-2.313l0.391-3.121l-0.956-1.764l-1.359-1.763l-0.679-1.762l1.896-2.441
l0.135-1.897l-0.814-0.542l-0.406-1.897l0.677-1.355l0.542,0.812l0.542,0.813l0.677,0.813l1.22-0.678l0.672-1.219l0.536-1.22v-0.95
l0.142-0.812l0.477-1.355l0.374-0.95l1.203-0.541l0.399-1.084l0.809-2.304l0.947-1.22l0.405-1.22l-0.136-1.084l-0.542-0.812
l-0.406-0.543l3.117,0.135l0.813,1.22l0.813,0.95l2.575,0.405l0.542-0.948l1.355,0.678l0.813,0.271l2.71,0.813l2.575,1.491
l1.491,0.271l0.542-0.406l0.949-0.407l0.677-0.678l0.678-0.135l0.271,1.355c0,0,0.474,0.405,0.576,0.405s0.373,0.238,0.373,0.238
l0.44,0.373l-0.034,0.338l-0.508,0.135l-0.068,0.372l-0.373,0.171l-0.169,2.065l-0.407,0.068l-0.136,3.253l-0.474,0.033
l-0.288,4.438L115,304.07V308h1.05l-0.306,2.439l0.61,0.101l-0.033,0.916c0,0,0.542,0.051,0.576,0.152c0.034,0.102,0,0.974,0,0.974
l0.576,0.065l-0.034,1.081l0.407-0.036l0.101,1.83l-4.337-0.068l-0.067,0.406l-1.017,0.068l-0.135,0.474l-0.677,0.61l-0.475,1.085
l-0.542-0.475l-0.746-0.61l-0.406-0.474l-0.407-1.084l-0.881-0.542l-0.813-0.067l-0.61-0.543l-1.829-0.068l-0.61-0.609l-0.813-0.881
l-0.813-0.135l-0.61-0.475l-0.542-0.407l-0.61-0.88l-0.542-0.678l-0.948-0.271l-0.948-0.45L97.822,309h-0.746l-0.406-1h-0.678
l-0.339,0.473c0,0-0.678,0.272-0.745,0.611c-0.068,0.338,0.135,0.78,0.135,0.78l0.136,1.032c0,0-0.136,0.618-0.136,0.822
c0,0.203-0.61,0.818-0.678,1.021s-0.474,1.085-0.474,1.085l-0.407,0.746c0,0-0.203,0.611-0.474,1.018
c-0.271,0.407-0.881,1.153-0.881,1.153s-0.507-0.068-0.574,0.88C91.489,318.571,92,319.18,92,319.18v0.475L91.235,319.823z"/>
<path fill="#75B6F3" d="M89.488,322.184l2.124,0.408l1.287-0.249l-0.26-1.164l-0.536-1.893l0.997-0.539l0.634-1.444l0.724-1.264
l0.633-1.807l0.542-1.354l-0.09-1.935L95.812,310h1.265l2.079,1.575l1.264,0.741l0.542,0.869l2.078,1.11l0.723,0.918l1.355,1.092
l2.62,0.183l1.174,1.267l1.626,1.627l0.994,0.543l1.987-1.807l1.266-0.271l2.62,0.182l0.632,1.445l0.09,1.355l0.813,1.265
l0.994,0.631l0.542,1.897l-1.174,1.627l-2.891,1.716l-2.168,1.897l-0.271,2.711l0.362,2.439c0,0-0.813,0.271-1.084,0.361
c-0.271,0.091-2.168-0.181-2.168-0.181l-1.265-0.994l-2.078-0.904l-1.445-0.089l-1.897,0.18c0,0-0.452,0.181-0.723,0.271
c-0.271,0.091-3.433,0.091-3.975,0.091c-0.542,0-1.807-1.717-2.801-1.808c-0.993-0.09-1.536-0.542-2.077-0.09
c-0.542,0.452-1.355,0.994-1.355,0.994s-1.446,0.181-1.446-0.09c0-0.272-0.361-1.987-0.361-1.987s0,0-0.723-0.813
c-0.722-0.813-0.903-1.807-0.813-2.349c0.091-0.543-0.271,0.089-0.452-0.994c-0.181-1.084-0.271-2.891-0.271-2.891L89.488,322.184z"
/>
<path fill="#75B6F3" d="M87.343,345.631l0.485-0.658l-0.073-0.824c0,0-0.24-0.305-0.331-0.484C87.334,343.483,87.32,343,87.32,343
s0.045,0,0.542,0s0.633-0.334,0.633-0.334s-0.316-0.146,0.18-0.055c0.497,0.09,0.723-0.027,0.723-0.027l0.045-0.238
c0,0,0.362-0.076,0.497-0.076c0.136,0,0.587,0.136,0.587,0.136L90.572,342h0.542l-0.181-1.433L91.205,339H92v-3.084l0.325-0.32
l-0.177-0.903l0.5-0.678l0.385-0.135l0.734-0.234c0,0-0.073-0.135,0.334-0.169c0.407-0.034,0.404-0.372,0.404-0.372
s-0.002-0.508,0.405-0.543c0.407-0.034,0.542-0.135,0.948,0.068c0.407,0.204,0.576,0.475,0.711,0.746
c0.136,0.27,0.712,0.644,0.813,0.813c0.101,0.169,0.847,0.406,0.915,0.609c0.067,0.204-0.068,0.577,0.305,0.577s2.067,0,2.304-0.068
c0.238-0.068,1.084,0,1.321-0.203c0.237-0.204,0.61-0.372,0.712-0.372c0.102,0-0.136-0.238,0.44-0.068
c0.577,0.169,1.22,0.135,1.355,0c0.135-0.135,0.305-0.406,0.407-0.474c0.102-0.068,0.813-0.035,1.083-0.068
c0.271-0.034,0.881,0.068,1.152,0.068s1.05-0.441,1.321,0.067s0.813,0.406,1.05,0.745c0.237,0.338,0.373,0.542,0.542,0.711
c0.169,0.17,1.017,0.542,1.017,0.542s0.373-0.44,0.508,0.068c0.135,0.508-0.068,1.322-0.068,1.322s-0.169,0.44-0.237,0.542
c-0.067,0.102-0.305,0.711-0.305,0.711s-0.271,0.644-0.475,0.78c-0.203,0.135-0.203,0.101-0.338,0.643
c-0.135,0.543-0.169,1.084-0.135,1.254c0.034,0.17-0.305,0.407-0.373,0.712c-0.067,0.305,0.034,0.372,0.169,0.643
c0.136,0.271,0.136,0.44,0.136,0.644c0,0.204-0.068,1.187-0.102,1.288c-0.034,0.102-0.474,0.406-0.474,0.542
c0,0.135,0.034,0.44,0.034,0.61c0,0.168-0.407,0.542-0.407,0.542s-0.305,0.067-0.203,0.407c0.102,0.338,0.034,0.847-0.237,0.847
c-0.271,0-0.678,0.271-0.678,0.271l-0.508,0.238l-0.746,0.136l-0.034,0.372l-0.542,0.102l0.169,0.372l-1.084,0.102l-0.034,0.408
c0,0-1.51,0.067-1.646,0.102c-0.136,0.033-0.697,0.202-0.697,0.202v0.44l-0.827-0.135l-0.363-0.474l-0.808-0.033
c0,0,0.138-0.44-0.235-0.475c-0.373-0.035-0.812-0.271-0.812-0.271s-0.236-0.339-0.338-0.339s-0.813-0.033-0.813-0.033l-0.305-0.475
l-0.305-0.169l-0.067-0.44c0,0-0.678-0.102-0.813-0.102c-0.135,0-0.406-0.474-0.406-0.474l-0.474,0.224L96.399,347h-0.406
l-0.034-0.766l-0.678-0.093l0.068-1.114c0,0-0.237-0.279-0.338-0.313c-0.102-0.034-0.237-0.715-0.237-0.715h-0.949l0.101,0.498
l-0.44,0.351l-1.694-0.097l-0.237-0.403l-2.642-0.014l0.034,0.382l-0.169,0.341l-0.508-0.031l-0.373,0.306L87.343,345.631z"/>
<path fill="#75B6F3" d="M91.724,368.711l-2.744-1.693l-2.592-0.848l-0.618-2.32l-0.919-1.363l-0.934-0.683l0.414-2.44l0.681-2.982
l0.544-0.95l0.137-1.084l1.627-1.897l0.678-6.098l1.355-0.743L91.114,345h1.626l1.762,0.065l0.135,1.118l0.813,0.626l1.084,1.125
l1.626,0.97l1.626,0.688l1.626,0.771l0.813,0.636h1.897l2.981-1.308l1.084-1.061l0.135,1.773l-0.271,1.632l-0.136,2.036
l-0.135,1.222l-0.136,2.304l0.136,2.847l0.271,1.491l0.136,1.49l0.271,4.474l-0.542,3.115l-0.135,3.524l-1.626,1.49l-1.491,2.846
l-0.407,2.71l0.542,3.389l1.032,3.117l1.166,3.116c0,0,0,0.136,0,0.542c0,0.407,1.272,2.304,1.272,2.304l0.094,3.795l-0.563,1.22
l-2.992-0.271l-2.987-0.678c0,0-2.306-0.541-3.12-0.541c-0.813,0-3.389-0.814-3.389-0.814l-1.627-0.677l0.677-0.948l-0.813-0.95
l-1.22-1.625c0,0,0.271-0.813,0.678-0.948c0.407-0.137,1.897-2.17,1.897-2.17l0.948-2.167l0.271-3.388l-0.542-2.44l1.762-1.625
l-0.542-3.089L97.077,375h1.626l1.22-0.705l0.135-1.504c0,0-0.135-1.362-0.542-1.362s-1.897,0.876-1.897,0.876l-1.355-1.018
L97.619,370h2.168l2.304-1.322l-0.271-2.151l0.677-0.806l-0.949-0.131l-0.406,0.545l-2.304,1.329L97.077,365h-2.167l-0.678,1.313
l-1.491,1.538L91.724,368.711z"/>
<path fill="#75B6F3" d="M85.152,392.359c-0.407,0-2.237-0.78-2.237-0.78l-1.999-1.202l-1.066-0.127l0.686-1.758l0.953-1.623
l0.137-2.168l0.272-3.793l0.814-1.491l-0.135-2.168l0.542-1.22l0.542-0.948l0.135-2.711l0.949-0.406l0.407,0.627L85.965,372h1.897
l0.407,1.474l1.137,0.871L90,375.081v1.49l-2.289,1.083l-1.347,1.221l-0.606,1.084l-0.574,2.033l0.526,1.085l1.211,1.219
l-0.139,1.084l-0.434,0.813L87,386.871v1.083l-0.789,0.408l-0.191,1.761L85.152,392.359z"/>
<polygon fill="#75B6F3" points="76,396.086 75.02,395.68 74.259,394.053 75.264,394.188 76,395.138 "/>

<path fill="#75B6F3" d="M64.237,476.198L65.908,475h0.813c0,0,0.904,0.283,0.994-0.529c0.09-0.815-0.091-1.208-0.452-1.39
c-0.361-0.18-0.723-0.784-0.542-1.057c0.181-0.271,0.904-0.888,0.904-0.888l0.632-0.896l-0.181-1.263l0.452-0.359l0.181-1.173
l1.896,0.09c0,0,0.723-0.361,1.084,0.452c0.362,0.813,0.632,1.716,0.632,1.987s-0.089,5.872-0.089,6.146
c0,0.27-0.09,3.341,0.903,3.341c0.994,0,0.362,0.813,0.362,1.627s0,1.536-0.362,1.807c-0.361,0.271-0.903,0.993-0.903,0.993
s-1.356,0.994-1.627,0.994c-0.271,0-0.813-0.902-0.813-0.902s-0.181-1.355-0.181-1.627c0-0.271-0.09-1.446-0.722-0.723
c-0.633,0.723-1.175,1.084-1.446,0.452c-0.271-0.633-0.542-1.266-0.994-1.989c-0.452-0.721-0.813-0.813-1.355-1.444
c-0.542-0.632-1.084-1.142-1.084-1.142L64.237,476.198z"/>
<path fill="#75B6F3" d="M65,489.322v-2.169c0,0,0.319-1.717,0.5-1.807c0.18-0.09,2.147,0,2.417,0.135
c0.271,0.137,1.231,0.227,1.774,1.22c0.541,0.994,0.638,1.943,0.638,2.35c0,0.407-0.404,0.857-1.172,1.039
c-0.768,0.181-1.895,0.587-2.708,0.226c-0.813-0.36-1.447-0.857-1.447-0.857L65,489.322z"/>
<path fill="#75B6F3" d="M70.651,492.529c0,0-1.039-1.129-0.813-1.31c0.226-0.182,0.542-0.453,0.903-0.769
c0.362-0.316,0.769-0.993,1.807-0.588c1.04,0.407,1.265,0.407,1.265,1.04c0,0.632,0.271,1.13-0.135,1.311
c-0.407,0.181-0.723,0.542-1.265,0.542S70.651,492.529,70.651,492.529z"/>
<path fill="#75B6F3" d="M70.696,494.02c-0.768,0-0.406-0.496-1.129,0.227c-0.724,0.722-0.903,0.722-0.677,1.083
c0.225,0.362,0.496,1.356,0.813,1.4c0.316,0.046,0.813-0.044,0.948-0.089c0.136-0.046,0.587-0.588,0.587-0.588l-0.045-1.085
L70.696,494.02z"/>
<path fill="#75B6F3" d="M72.413,494.178c-0.091,0.543,0.249,1.05,0.249,1.05s-0.011,0.437,0.576,0.347
c0.587-0.093,0.531-0.245,0.531-0.516c0-0.27,0-0.316,0-0.316s-0.137-0.632-0.317-0.632s-1.084-0.091-1.084-0.091L72.413,494.178z"
/>
<path fill="#75B6F3" d="M64.191,495.014c0.904-1.22,2.259-1.717,1.717-2.529c-0.542-0.813-0.452-1.853-1.401-1.446
c-0.948,0.407-1.445,0.225-1.445,1.084s-0.452,2.169-0.045,2.35S64.191,495.014,64.191,495.014z"/>
<path fill="#75B6F3" d="M73.678,500.615c-1.536-0.541-2.033-0.587-2.666-1.129c-0.632-0.543-1.174,0.181-0.723-0.904
c0.451-1.083,0.18-1.038,0.994-1.49c0.813-0.451,0.723-1.311,1.717-0.451c0.993,0.858,1.581,1.264,1.31,1.761
S73.678,500.615,73.678,500.615z"/>
<path fill="#75B6F3" d="M69.793,504.547c-0.452-1.581-1.174-2.575-0.361-2.756c0.813-0.181,0.632-0.813,2.033-0.09
c1.4,0.722,1.852,1.129,1.716,1.626c-0.136,0.496-0.181,0.948-0.904,1.174c-0.723,0.227-1.129,0.633-1.671,0.542
C70.064,504.953,69.793,504.547,69.793,504.547z"/>
<path fill="#75B6F3" d="M68.8,505.811c-0.588-1.174-0.045-1.987-1.084-1.987s-1.265-0.947-1.626-0.089
c-0.362,0.857-0.858,0.541-0.768,1.49c0.09,0.948,0.181,1.717,0.632,1.942c0.452,0.225,0.362,0.497,1.175,0.271
s1.219-0.407,1.446-0.813C68.8,506.218,68.8,505.811,68.8,505.811z"/>
<path fill="#75B6F3" d="M72.006,514.348c-2.213-0.949-2.982-0.315-3.163-1.943c-0.18-1.625-0.406-2.167-0.09-3.025
c0.317-0.859,0.452-2.259,1.266-2.304c0.813-0.046,1.581-0.634,2.124,0.633c0.541,1.264,0.677,1.896,1.129,2.936
c0.452,1.038,0.632,2.349,0.497,2.71c-0.136,0.361-0.678,0.723-1.13,0.859C72.187,514.348,72.006,514.348,72.006,514.348z"/>
<path fill="#75B6F3" d="M72.322,515.703c-1.31-0.181-2.213-1.31-2.484-0.181s-1.265,1.535-0.361,2.259
c0.903,0.722,1.31,0.813,1.988,0.993c0.678,0.181,0.948,0.226,1.807,0.271c0.858,0.044,1.445-0.181,0.948-1.129
C73.723,516.967,72.322,515.703,72.322,515.703z"/>
<path fill="#75B6F3" d="M75.484,515.16c0.09,1.354-0.135,1.807,0.362,2.124c0.497,0.315,0,0.271,1.491,0.361
c1.49,0.089,1.897,0.406,2.078-0.271s0.136-1.31-0.361-1.536c-0.497-0.226-0.948,0.09-0.768-0.543
c0.181-0.631,0.316-0.315,0.768-0.721c0.452-0.407,0.768-1.176,0.045-0.95C78.376,513.852,75.484,515.16,75.484,515.16z"/>
<path fill="#75B6F3" d="M82.26,530.565c-1.942-0.541-1.581-0.36-3.388-1.084c-1.807-0.723-2.801-0.406-3.704-1.535
c-0.903-1.131-1.987-1.175-2.575-2.123c-0.587-0.948-0.857-1.265-0.541-1.762c0.315-0.498,0.813-1.129,1.626-0.813
c0.813,0.315,1.31,0.496,1.716,0.949c0.406,0.451,1.536,1.309,1.942,1.535c0.406,0.226-0.226,0.902,1.355,0.633
c1.581-0.271,1.49,0.631,1.716,1.039c0.226,0.405,0.859,0.496,1.401,0.812c0.542,0.317,1.22,0.994,1.22,1.312
C83.029,529.843,82.26,530.565,82.26,530.565z"/>
<path fill="#75B6F3" d="M79.008,522.254c-0.632-0.723-1.174-1.4-1.039-1.852s0.497-1.04,1.265-0.182
c0.768,0.859,0.587,1.581,0.361,1.853C79.37,522.344,79.008,522.254,79.008,522.254z"/>
<path fill="#75B6F3" d="M82.125,526.274c-0.09-1.175,0-1.31,0.813-1.399c0.813-0.091,0.543,0.315,1.988-0.091
c1.445-0.407,1.49-0.137,2.033-1.04c0.542-0.902,0.722-1.264,1.445-1.174c0.723,0.091,1.219-0.588,2.258-0.09
c1.039,0.497-0.226,0.857,1.942,0.542c2.168-0.317,1.22-0.679,2.621-0.679c1.4,0,0.451-1.038,1.67,0
c1.22,1.039,1.762,0.859,2.168,1.4c0.407,0.542,0.904,0.633,0.045,1.491c-0.858,0.859-0.497,1.084-2.258,1.265
c-1.762,0.181-2.168-0.496-2.756,0.271c-0.587,0.768-1.219,0.225-2.258,1.716c-1.04,1.491-1.897,2.665-1.897,3.252
c0,0.589,0.226,1.672-1.084,0.542c-1.311-1.128-1.536-0.36-2.213-1.263c-0.678-0.904-0.542-0.589-0.723-1.582
s-0.452-1.581-1.31-1.581c-0.858,0-1.355,0.045-1.807-0.451S82.125,526.274,82.125,526.274z"/>
<path fill="#75B6F3" d="M86.326,538.068c0,0-0.588,2.982-1.491,2.485c-0.904-0.498-1.265-0.77-1.491-1.718
c-0.226-0.948,0.542-0.994-0.768-2.258c-1.31-1.266-2.62-1.896-2.71-2.124c-0.09-0.225-0.362-1.129,0.09-1.444
c0.452-0.316,1.04-0.859,2.213-0.859c1.175,0,1.717-0.315,2.575,0.317c0.858,0.631,1.4,0.45,2.394,0.948
c0.994,0.496,2.349,1.264,2.756,1.535c0.407,0.271,1.581-0.136,1.807,0.678c0.226,0.813,0.271,1.896,0.271,2.259
c0,0.361-0.362,0.452-0.769,1.085c-0.407,0.631-0.769,1.896-0.949,2.348c-0.18,0.452-1.083,0.496-1.761-0.271
c-0.678-0.768-1.536-2.033-1.717-2.485c-0.181-0.451-0.452-1.173-0.361-0.315C86.507,539.107,86.326,538.068,86.326,538.068z"/>
<path fill="#75B6F3" d="M93.418,542.635c0.994,0.632,1.581,1.039,2.258,0.993c0.678-0.044,1.084-0.948,1.942-0.225
c0.859,0.722,1.31,0.631,1.626,1.083c0.316,0.452,1.4,0.633,2.123,0.497c0.723-0.136,1.4-1.489,1.355-1.671
c-0.045-0.181,0.586-0.859-0.542-1.581c-1.128-0.723-1.807-0.451-2.574-0.451c-0.768,0-1.31-0.137-2.213-0.317
c-0.904-0.18-1.4-0.451-2.078-1.084c-0.678-0.632-1.174-1.084-1.491-0.949c-0.316,0.136-0.497,0.271-0.542,0.633
c-0.045,0.362-0.587,0.633-0.678,0.95c-0.09,0.315-0.361,0.677-0.271,0.857S93.418,542.635,93.418,542.635z"/>
<path fill="#75B6F3" d="M123.729,552.291c0,0,1.22-13.054,1.04-15.944c-0.181-2.892,0.339-7.159-0.203-9.148
c-0.542-1.987-0.916-4.664-0.916-4.664l-2.173-0.164l-1.268,0.37l-1.989-2.525c0,0-1.626-0.54-1.807,0.183
c-0.181,0.724-0.904,2.522-0.904,2.522l-1.446,1.08h-2.891l-1.264-0.084c0,0-1.446-0.133-1.446,0.409
c0,0.543,0.542,1.381,0.542,1.381s0.361,1.231,0,1.774c-0.361,0.542-0.903,2.512-0.903,2.512s-0.181,0.354,0.361,1.618
c0.542,1.266,2.167,1.262,2.167,1.262l1.807,0.178l3.252-1.808c0,0,0.723-0.002,0.904,0.722c0.18,0.724-1.084,2.168-1.084,2.168
l-2.168,1.446l-1.987,2.168c0,0,0,1.626,0.542,2.529c0.542,0.903,1.626,1.446,2.168,2.168c0.542,0.723,1.988,1.626,2.891,1.988
c0.904,0.361,1.445,3.071,1.445,3.071l-0.903,1.987l-1.445-0.722c0,0-1.084-1.808-1.626-1.808s-4.698-1.787-4.698-1.787L107.557,547
h-3.433l-3.976,0.07c0,0-4.155-0.415-4.155,0.85s2.891,1.416,2.891,1.416l3.795,0.53c0,0,2.168,1.114,2.71,2.018
c0.542,0.904,3.252,1.116,4.337,1.116c1.084,0,4.698,0,4.698,0s2.71,0.232,3.072,0.773c0.362,0.543,2.529,0.479,2.529,0.479
l1.446-1.658L123.729,552.291z"/>
<path fill="#75B6F3" d="M107.376,556.898c-1.446,0-3.252-2.349-3.252-2.349l1.265-1.084l2.168,0.542l0.723,1.627L107.376,556.898z"
/>
<polygon fill="#75B6F3" points="102,554.188 99.99,553.646 99.098,551.84 102,552.021 "/>
<path fill="#75B6F3" d="M114.333,560.061l-1.942-1.762l1.649-1.423l-0.893-1.615l0.187-1.079c0,0,0.725-0.899,1.629,0.545
c0.904,1.447,1.627,1.086,1.627,1.086l1.627,0.543l1.807,0.182l1.627-0.361l-0.181,1.445l0.361,1.084l1.265,0.361l0.723,0.785
L123.278,561h-1.266l-1.988-1.057l-1.265-2.065l-1.807-0.488l-1.446,0.387l-0.181,1.82L114.333,560.061z"/>
</svg>
<br><br>
</div>

<div class="span3">
<div class="">
<ul class="nav nav-pills nav-stacked">

<li class="active large"><a href="metropolitana.html">Region Metropolitana</a></li>
<li><a href="quinceregion.html">XV Arica & Parinacota</a></li>
<li><a href="primeraregion.html">I Tarapacá</a></li>
<li><a href="segundaregion.html">II Antofagasta</a></li>
<li><a href="terceraregion.html">III Atacama</a></li>
<li><a href="cuartaregion.html">IV Coquimbo</a></li>
<li><a href="quintaregion.html">V Valparaíso</a></li>
<li><a href="sextaregion.html">VI O'Higgins</a></li>
<li><a href="septimaregion.html">VII Del Maule</a></li>
<li><a href="octavaregion.html">VIII Biobío</a></li>
<li><a href="novenaregion.html">IX Araucanía</a></li>
<li><a href="catorceregion.html">XIV Los Ríos</a></li>
<li><a href="decimaregion.html">X Los Lagos</a></li>
<li><a href="onceregion.html">XI Aisén</a></li>
<li><a href="doceregion.html">XII Magallanes & Antártica</a></li>
</ul>

</div></div>


</div>







</div>
</div>

最佳答案

您可能想使用类似Raphael.js

看看这个人为法国 build 一个页面:http://www.jonathan-petitcolas.com/2013/07/18/create-clickable-svg-france-regions-map.html

我正在为美国构建一个,但在 Code Canyon 上找到了一个具有一些额外功能的,并且值得我花 5 美元或 10 美元。

关于javascript - 使用 svg 和 javascript 的交互式 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24271253/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com