我正在制作一张包含 6 个区域的小 map ，该 map 是在 Illustrator 中绘制的，因此它是 SVG。 此 map 的要点是在单击其中一个区域时显示自定义 HTML 内容。
这是我目前所拥有的:
HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g opacity="0.98">
<path id="city-1" fill-rule="evenodd" clip-rule="evenodd" fill="#5A668A" d="M411.242,203.521c1.162,1.08,2.369,2.117,3.479,3.248
c3.087,3.138,8.499,0.7,11.14,7.15c4.314,10.54,3.215,20.083-0.289,29.821c-0.907,2.522-0.785,7.336-4.824,7.374
c-4.117,0.039-6.598-3.22-8.025-7.074c-2.567-6.928-8.099-1.441-12.039-4.481c-0.225,4.989,3.69,5.137,4.552,7.557
c-5.521,6.449-15.293,6.48-20.309,13.811c-0.834,1.222-4.005,0.723-6.022,1.285c-3.168,0.884-7.185,0.586-7.741,5.414
c-0.19,1.66-1.38,2.528-3.236,2.905c-7.462,1.515-11.576,7.63-16.516,12.542c-1.152,1.145-1.974,1.985-3.839,2.182
c-16.945,1.8-18.937,1.569-23.413,17.295c-4.482-1.16-3.471-7.891-9.702-8.461c2.305,6.868,3.683,13.589,10.346,17.261
c6.494,3.578,9.562,7.924,4.717,14.934c-0.881,1.273-2.51,2.786-0.831,4.133c5.367,4.299,6.526,11.134,10.29,16.241
c2.116,2.872,4.461,7.729,10.097,5.902c1.708-0.555,3.266,1.051,3.898,2.307c3.88,7.71,12.728,10.405,17.282,17.707
c2.282,3.658,8.383,3.303,12.327,6.535c6.32,5.183,5.259,11.674,4.815,17.899c-0.26,3.668-3.402,5.523-7.538,3.157
c-4.842-2.77-7.103-0.435-6.963,4.431c0.212,7.408-3.187,11.254-10.425,12.341c-3.573,0.537-5.661,3.754-8.451,5.722
c-8.72,6.15-9.004,6.473-2.217,14.025c3.619,4.027,6.676,7.59,3.314,13.208c-0.473,0.79-1.355,2.93,0.71,3.114
c11.002,0.985,2.698,8.428,4.186,12.568c0.453,1.26-1.087,2.53-2.595,2.098c-3.338-0.959-7.323-2.397-8.106-5.665
c-1.556-6.481-4.09-7.565-9.108-3.416c-2.315,1.915-3.669-0.66-5.373-0.918c-3.505-0.531-8.898-6.564-10.526,2.374
c-0.374,2.069-2.591,1.399-4.037,1.332c-11.511-0.532-21.127,3.56-29.731,11.11c-6.078,5.336-13.781,4.197-19.406-1.316
c-4.659-4.569-10.729-4.486-16.788-3.465c-2.367,0.4-1.737,1.967-1.661,3.574c0.338,7.247-4.113,10.836-9.639,13.288
c-3.692-9.402-10.391-14.883-19.028-18.399c-1.557,0.495-2.058-0.371-2.202-1.7c1.967-4.741,6.363-5.422,10.566-5.776
c3.694-0.312,5.002-1.748,5.147-5.409c0.36-9.045,0.97-17.936-2.841-26.658c-3.029-6.934-1.89-12.914,4.861-18.186
c11.398-8.899,11.551-19.852,2.193-30.798c-4.533-5.301-7.132-11.706-6.63-19.049c0.165-2.424,1.525-6.154-2.295-6.601
c-5.722-0.669-7.88-4.116-8.306-8.979c-0.488-5.578-7.845-4.49-8.638-9.517c-0.851-9.175,8.618-10.401,12.659-15.84
c-9.712-6.679-11.373-12.44-6.702-21.398c1.208-2.315,2.762-3.806,5.215-4.448c3.86-1.007,4.818-4.66,6.762-7.416
c3.222-3.061,7.434-3.576,9.834-0.261c4.422,6.11,12.154,8.505,16.192,15.694c0.176-4.427-0.085-8.867,6.109-8.156
c4.153,0.477,8.234,1.131,11.973,2.778c1.543-1.963,0.984-3.868,0.902-5.684c-0.147-3.266,1.058-5.765,4.133-7.004
c3.062-1.232,3.971,1.49,5.595,3.168c3.13,3.234,12.196,2.518,16.53-1.728c4.167-4.078,10.703-6.064,9.818-14.704
c-0.399-3.917,5.583-7.892,9.85-10.601c-0.281-2.025-1.929-3.067-3.206-3.284c-10.369-1.77-11.62-8.558-10.239-17.314
c0.706-4.494-2.393-8.7-1.777-13.325c2.634-6.404,7.11-10.165,14.193-11.305c6.689-1.078,11.812-7.585,19.411-6.015
c2.178,0.217,4.716,0.744,5.565,2.637c3.083,6.877,9.722,7.761,15.617,10.038c5.845,2.259,12.163,0.455,14.831-5.267
c2.118-4.548,5.053-6.594,9.895-6.207c4.818,0.384,8.317-3.427,12.794-4.034C404.936,203.4,408.062,202.268,411.242,203.521z"/>
<path id="city-2" fill-rule="evenodd" clip-rule="evenodd" fill="#021540" d="M343.564,208.547c-12.022,3.481-25,4.973-33.357,16.062
c-5.201,2.445-8.98-0.962-11.99-3.92c-9.596-9.436-21.211-15.93-32.183-23.383c-3.365-2.287-6.851-2.591-10.666-1.926
c-9.316,1.625-18.463,0.921-27.74-1.048c-16.195-3.439-32.697-4.4-49.235-4.31c-6.765,0.038-13.043,2.168-19.195,4.965
c-9.225,4.194-18.519-0.34-21.337-9.951c-0.961-3.277,0.081-8.591-2.97-9.509c-6.749-2.03-12.027-8.212-19.814-7.06
c-3.963-0.289-8.262,0.254-7.686-6.171c0.489-5.445,2.719-7.528,8.023-5.897c3.454,1.062,4.654-0.341,5.011-3.771
c1.125-10.855,6.379-20.974,5.706-32.197c-0.194-3.226,1.635-7.282-4.397-6.415c-1.646,0.238-3.149-0.342-3.43-2.412
c-1.13-8.331,5.892-21.5,15.109-19.656c3.009,0.601,5.679-0.417,8.518-0.77c4.313-0.536,9.717-4.288,12.667,1.193
c1.665,3.093,9.235,6.139,2.088,11.636c-1.226,0.944,3.019,2.092,4.171,3.838c0.597,0.903,1.731,1.036,2.588-0.075
c1.435-1.857,2.227-4.472,0.288-5.642c-2.807-1.694-2.288-3.256-0.884-5.051c2.143-2.743,3.457,0.005,5.17,0.9
c1.763,0.92,4.053,2.903,5.713,1.162c1.854-1.945-0.584-3.432-1.748-5.193c-3.11-4.714-0.092-9.347,1.813-13.376
c2.057-4.354,4.827-0.409,7.12,0.758c3.406,1.732,6.123-0.77,9.101-1.026c1.042-3.736-7.21-8.005,0.968-10.861
c-0.348-0.964-0.565-2.69-1.062-2.774c-6.142-1.041-4.387-5.433-3.913-9.008c-2.579-2.099-7.852,1.686-8.135-3.071
c-0.456-7.666,7.526-5.062,12.211-7.292c-1.891-1.957-5.412-1.043-4.719-2.76c3.661-9.067-4.644-13.57-7.359-20.097
c-1.839-4.423-1.81-5.949,3.433-5.951c6.623-0.002,13.17-0.246,18.905,3.869c1.355,0.972,2.864,1.527,4.41,0.531
c5.296-3.41,10.075-1.429,15.272,0.718c9.4,3.886,11.631,10.441,5.888,19.335c8.76-0.159,16.794,2.787,24.416,6.537
c3.13,1.54,5.204,3.486,7.782-0.345c2.219-3.297,5.979,0.07,8.396-2.586c1.292,9.129,0.886,16.642-9.141,19.366
c-1.454,0.395-2.249,2.782-1.531,2.997c5.155,1.545,1.021,6.196,3.151,8.602c1.234,4.968,1.156,9.787,5.375,14.427
c3.596,3.953-2.297,8.269-5.812,11.606c0.419,1.47,2.19,1.075,3.019,2.027c11.793,13.581,28.647,18.585,44.138,25.836
c3.879,1.815,4.864,4.603,4.841,8.249c-0.043,6.518-1.472,13.109,3.836,18.772c1.913,2.042,0.745,5.617,0.323,8.536
c-1.87,12.901,3.289,19.36,16.081,19.802c5.242,0.181,9.879,2.068,14.41,4.244c3.905,1.876,5.879,5.451,5.906,9.721
C351.137,205.576,347.716,207.518,343.564,208.547z"/>
<path id="city-3" fill-rule="evenodd" clip-rule="evenodd" fill="#A3A4A4" d="M115.076,168.468c4.801-3.275,9.162-1.889,12.809,1.774
c1.944,1.952,3.27,3.05,5.831,1.145c3.004-2.236,4.112-0.712,4.422,2.468c0.31,3.171,0.741,6.357,1.482,9.45
c2.476,10.315,10.435,13.801,19.823,8.99c12.003-6.15,24.883-4.511,37.585-3.8c13.276,0.742,26.488,2.101,39.446,5.357
c2.283,0.575,4.947,1.007,7.126,0.4c22.149-6.182,35.736,8.723,50.502,20.455c5.021,3.988,9.608,8.423,16.104,9.902
c3.375,6.362,4.156,13.198,2.929,20.135c-0.611,3.446-1.023,5.399,3.576,5.545c5.738,0.18,8.959,4.992,14.832,9.298
c-8.563-1.315-10.449,5.099-14.735,8.096c-0.568,0.398-1.35,1.486-1.181,1.807c6.413,12.195-10.169,10.25-11.481,18.055
c-0.148,0.89-6.979,0.644-10.672,1.762c-4.496,1.362-6.907-0.97-7.606-5.508c-0.173-1.121-1.536-1.431-2.567-0.723
c-1.531,1.05-3.162,2.169-2.864,4.392c0.245,1.826,0.79,3.616,0.97,5.445c0.231,2.36-1.009,4.269-2.912,5.316
c-2.652,1.459-2.674-2.211-3.58-2.437c-4.301-1.069-8.553-3.45-14-1.717c2.377,3.326,6.607,7.298-1.236,8.522
c-1.467,0.228-3.225,0.016-3.336-1.286c-0.772-8.946-11.889-8.776-14.345-16.537c-0.653-2.062-4.72-1.616-7.037,0.403
c-7.017-8.247-16.319-10.389-26.682-10.943c-8.497-0.454-16.754-3.008-24.852-5.765c-9.592-3.268-18.398-2.596-25.637,5.365
c-3.783,4.162-6.907,3.117-9.536-1.188c-2.503-4.099-4.244-8.604-6.572-12.792c-3.3-5.934-8.293-7.666-14.44-4.758
c-3.085,1.459-5.64,1.072-8.244-0.632c-3.624-2.371-7.89-3.069-11.484-1.386c-7.517,3.521-12.787,0.595-17.712-4.609
c-1.644-1.737-4-2.689-5.252-4.842c-0.292-1.473-3.444-1.798-1.297-4.354c8.236-9.809,4.01-18.77-2.376-27.346
c-1.923-2.583-4.927-5.607-2.615-8.223c2.425-2.745,5.834-5.618,10.882-3.086c6.006,3.013,12.275-2.66,18.902-0.32
c2.271,0.801,3.317-4.141,1.961-5.579c-4.321-4.584-0.597-5.99,2.284-8.353c3.635-2.983,7.171-5.901,7.51-11.511
C120.048,170.717,118.448,169.27,115.076,168.468z"/>
<path id="city-4" fill-rule="evenodd" clip-rule="evenodd" fill="#889CD1" d="M343.564,208.547c2.871-2.182,6.67-4.15,6.223-8.258
c-0.49-4.501-4.096-6.791-8.058-8.891c-5.472-2.896-11.528-1.074-17.182-3.422c-11.252-4.675-13.729-8.186-12.081-20.172
c0.675-4.907,3.177-10.576-4.199-13.281c-2.049-0.751-1.512-3.299-0.578-4.909c2.346-4.048,0.422-8.362,1.037-12.508
c0.244-1.645-0.402-3.574-2.301-3.567c-7.465,0.025-12.201-5.818-18.405-8.186c-10.713-4.087-20.552-8.825-27.215-18.635
c-2.142-3.153-3.989,0.737-6.185,0.695c-0.561-3.81,2.985-4.72,4.762-6.696c2.369-2.638,5.217-5.37,4.416-8.894
c-0.889-3.911-5.352,0.043-7.557-2.431c0.884-3.82,1.816-7.852,2.75-11.883c4.105-6.505,7.953-12.887,16.836-5.208
c2.312,2,5.951,1.284,5.986-3.525c0.047-6.348,4.53-8.604,9.755-8.868c8.764-0.445,15.644-3.768,20.541-11.077
c1.686-0.594,3.101-1.62,4.421-2.796c4.589-4.464,10.878-2.185,16.122-4.07c1.213-0.305,2.898-1.265,3.331,0.568
c1.44,6.104,7.056,8.281,10.957,12.032c3.158,3.036,6.603,5.76,11.221,2.111c2.158-1.706,4.892-0.778,5.107,1.347
c0.528,5.199,4.626,8.77,5.117,14.146c0.54,5.912,6.625,6.732,11.361,8.194c1.316,0.408,2.676-0.993,4.136,0.939
c8.162,10.797,7.819,29.782-0.833,40.889c-3.495,4.487-4.955,8.504,2.008,11.936c4.667,2.299,8.587,6.199,12.651,9.61
c3.151,2.646,2.427,6.437,1.439,9.625c-0.941,3.049-1.41,5.907,0.554,8.336c6.726,8.325,8.68,17.266,4.539,27.365
c-1.182,2.88,0.803,5.325,2.39,7.18c1.93,2.257,3.751,4.413,4.608,7.277c-8.837,0.542-16.034,7.764-25.503,6.148
c-1.82-0.311-4.207,0.856-4.203,3.745c0.012,5.751-3.998,6.806-8.571,8.381c-5.717,1.971-10.749-3.5-13.478-2.662
c-7.179,2.206-7.624-2.902-9.957-6.107C347.929,210.827,346.768,208.444,343.564,208.547z"/>
<path id="city-5" fill-rule="evenodd" clip-rule="evenodd" fill="#857A5D" d="M84.549,243.629c0.793,0.067,1.954-0.184,2.327,0.247
c7.708,8.901,16.927,10.619,27.726,6.408c2.551-0.995,4.298,1.48,6.077,3.044c2.094,1.842,4.016,2.004,6.261-0.081
c3.926-3.644,13.132-1.324,15.715,3.812c2.504,4.978,4.985,9.968,7.442,14.969c1.721,3.501,3.177,4.308,6.096,0.628
c7.019-8.851,16.29-10.04,26.539-6.633c10.827,3.597,21.723,6.872,33.31,6.512c3.698-0.114,6.508,2.021,9.657,3.341
c1.374,0.576,2.453,2.76,4.09,1.658c5.725-3.854,4.942-0.595,3.939,3.349c-0.397,1.56-0.292,3.188,1.232,4.297
c-1.271,4.427-2.927,7.859-8.332,9.264c-4.44,1.153-5.667,6.819-5.497,10.526c0.158,3.427,1.45,8.514,6.838,9.121
c1.893,0.214,3.982,0.19,4.65,2.283c0.897,2.815-2.445,2.145-3.315,3.524c-3.226,5.115-12.504,4.771-11.948,13.267
c-1.732,2.121-3.82,1.206-5.867,0.693c-2.453-0.615-3.634,0.123-3.033,2.822c0.71,3.189-0.976,5.574-3.616,6.296
c-6.446,1.761-10.724,6.71-16.089,10.032c-1.244,0.086-2.152-0.522-2.93-1.404c-3.312-4.409-7.257-6.939-13.359-4.335
c4.227,11.586-2.495,21.058-6.141,31.129c-0.678,1.872-2.156,3.817-4.895,2.953c-5.498-2.794-11.605-3.422-17.493-4.745
c-4.236-0.953-8.208-2.364-11.215-5.397c-2.055-2.07-3.787-2.928-6.05-0.903c-2.58,2.309-5.47,1.16-8.333,1.245
c-5.287,0.156-9.062-9.087-15.295-2.4c-2.61-3.794-6.675-7.332-7.399-11.457c-0.65-3.706-1.933-6.104-4.65-7.469
c-4.815-2.423-5.428-5.279-2.255-9.342c4.972-6.367,4.05-10.847-3.444-14.809c-5.65-2.989-5.498-9.313-5.18-14.951
c0.264-4.668-2.78-9.451,4.572-13.155c9.252-4.663,8.764-7.796,1.396-14.737c-1.043-0.983-1.951-2.192-1.396-3.461
c2.171-4.959-1.727-7.714-4.538-9.394c-3.612-2.158-4.023-3.466-1.503-6.536c2.793-3.403,0.565-5.662-2.125-7.805
c-3.048-2.43-6.144-4.627,0.808-6.399C80.064,248.937,82.161,245.707,84.549,243.629z"/>
<path id="city-6" fill-rule="evenodd" clip-rule="evenodd" fill="#AFB9E0" d="M188.599,352.474c3.755-4.866,7.879-9.019,14.251-10.635
c2.177-0.552,7.481-1.721,2.442-6.14c-1.129-0.99-0.791-2.701,0.423-3.435c1.491-0.903,3.136-2.331,5.104-1.188
c2.047,1.187,3.91,2.792,6.54,2.09c6.901,2.349,9.449,7.586,10.079,14.444c0.181,1.966,2.262,2.854,4.38,1.939
c6.181-2.664,6.429,2.226,5.83,5.497c-1.826,9.97,1.36,17.587,8.846,24.049c6.042,5.215,2.634,13.434,5.546,19.784
c0.5,1.087-1.798,1.06-3.141,1.021c-1.532-0.04-4.24,0.854-3.795,1.941c3.089,7.567-4.146,8.205-7.453,10.627
c-4.947,3.626-3.256,8.208-1.733,11.347c5.15,10.614,3.67,21.697,3.843,32.711c0.047,2.961-0.035,5.199-4.398,4.168
c-4.82-1.14-9.248,0.719-12.999,3.971c-0.931,2.04-2.203,3.716-4.545,4.245c-7.029-1.863-14.055-3.519-20.675-6.875
c-3.4-1.727-7.963,0.815-11.916-2.298c-0.997-0.784-3.482-0.384-4.758-2.887c-2.171-4.261-5.718-2.726-8.718-0.818
c-0.947,0.604-1.76,2.246-1.725,3.387c0.068,2.229,2.107,1.809,3.631,1.9c1.538,0.091,3.452-0.267,3.516,2.092
c0.06,2.204-2.042,0.964-2.83,1.58c-3.721,2.912-6.886,1.978-11.368,0.951c-5.574-1.277-11.882,1.644-18.109,1.959
c-6.51,0.33-13.679-4.311-11.864-11.105c3.18-11.912,1.31-24.973,8.418-35.989c1.842-2.855,1.183-6.666,1.926-10.021
c2.662-12.026,14.085-18.418,18.079-29.436c7.165-11.138,13.628-22.437,8.141-36.909c6.931-0.487,14.11-2.842,17.356,6.328
C186.336,352.465,186.639,353.284,188.599,352.474z"/>
</g>
</svg>
</div></div>
<div class="row">
<div class="col-md-4" id="city-1-content">
City 1
</div>
<div class="col-md-4" id="city-2-content">
City 2
</div>
<div class="col-md-4" id="city-3-content">
City 3
</div>
</div>
<div class="row">
<div class="col-md-4" id="city-4-content">
City 4
</div>
<div class="col-md-4" id="city-5-content">
City 5
</div>
<div class="col-md-4" id="city-6-content">
City 6
</div>
</div>
</div>
CSS:
path:hover {opacity: 0.7; cursor: pointer}
#city-1-content, #city-2-content,#city-3-content,#city-4-content, #city-5-content, #city-6-content {display: none}
JS:
$(function($){
$('#city-1').click(function(){
$('#city-1-content').toggle();
});
$('#city-2').click(function(){
$('#city-2-content').toggle();
});
$('#city-3').click(function(){
$('#city-3-content').toggle();
});
$('#city-4').click(function(){
$('#city-4-content').toggle();
});
$('#city-5').click(function(){
$('#city-5-content').toggle();
});
$('#city-6').click(function(){
$('#city-6-content').toggle();
});
});
它在工作，但不是我想要的。
我想更新的内容:
- 用户点击第一个区域，显示链接到该区域的内容
- 用户点击其他区域，隐藏显示内容，显示新内容
关于如何更新代码以使其以这种方式工作的任何想法？
提前致谢!
最佳答案
给你的 svg 中的城市一个通用类(比如 .city)，给包含城市内容的 div 一个通用类(比如 .city-content)。用 CSS 或 JS 定位它们会更容易(让我们尽可能避免在 CSS 中使用 ID)。
接下来，我建议使用 each() ( https://api.jquery.com/each/ ) 循环遍历您的城市，这将大大缩短您的代码。接下来，获取 .city 的 id 并向其添加 -content (以定位相应的内容)然后在点击时显示它(我们也隐藏了其他点击时的元素).
更新的 JS:
$('.city').each( function(){
var citycontent = $('#' + (this.id) + '-content');
$(this).on('click', function(){
$('.city-content').hide();
citycontent.show();
});
});
这是你的代码笔的一个工作分支，这样你就可以理解它是如何工作的: https://codepen.io/anon/pen/BMxjKK
关于jquery - SVG map 在区域点击时显示内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54630996/