Question

我一直试图解决这个问题好几天但是无法弄明白。这似乎是一个非常简单的修复。

我希望当你将鼠标悬停在地图上时，地图的每个区域都会突出显示。问题是当光标悬停在文本上时 - 该区域将恢复为原始填充颜色。

有什么建议吗？

.map-highlight:hover {
  fill: #D01A20 !important;
}

<svg id="map example" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=http://www.w3.org/1999/xlink viewBox="0 20 300 300" xml:space="preserve">


<title>map example</title>


<a xlink:href="#"><path id="area 03" class="map-highlight" d="M174.13,101.66l-3.77,3.7a9.11,9.11,0,0,0-2.52,5.3c-.38,2.48-2.26,3.84-3.76,5.5a1.55,1.55,0,0,1-1.33.2c-2.48-.78-4.94-1.62-7.4-2.47a14,14,0,0,0-11.13.92c-2.79,1.38-5.35,3.23-8.06,4.76-1.94,1.1-2.12,1-2.32-1.15a10.43,10.43,0,0,0-2.64-6.11c-2.19-2.47-4.16-5.15-6.46-7.52a20.48,20.48,0,0,0-4.72-3.29,4.47,4.47,0,0,0-2.38,0c-1.07.12-2.12.34-3.18.52l-.25-.56c1-1.14,1.95-2.26,2.87-3.43,2.08-2.63,4.12-5.29,6.19-7.93,1.74-2.22,1.69-5,2.45-7.55.45-1.51.44-3.19,1.06-4.61,1-2.23,2.3-4.31,3.49-6.45.1-.18.3-.31.41-.48,1.57-2.46,1.57-2.46,3.75-.59l10.63,9.12c-.33.24-1.15.63-1.1.85a3.09,3.09,0,0,0,1,1.51c1.69,1.57,3.4,3.13,5.18,4.59a2,2,0,0,0,1.63.25c2.53-.8,4.41.23,6.3,1.8,3.78,3.16,7.69,6.18,11.52,9.29C171.06,99,172.53,100.32,174.13,101.66Z" style="fill: #8fd1c5"/>

<text transform="translate(133.32 102.78)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">03</text></a>

<a xlink:href="#"><path id="area 04" class="map-highlight" d="M132.87,122.67c3-.12,5.15-2,7.47-3.37,3.09-1.87,6.12-3.82,9.92-3.79a5.57,5.57,0,0,1,2,.33c2.59,1,5.29,1.84,7.57,3.6,2.61,2,4.78,1.45,6.89-1.07,2.86-3.41,4.08-7.47,5.37-11.56a3.29,3.29,0,0,1,1.25-1.59c1.3-.88,2.69-1.6,4.26-2.51,2.35,1.59,4.85,3.24,7.31,4.94A162.2,162.2,0,0,0,204.17,119c2.93,1.47,2.77,1.47,2.2,4.58-.77,4.23-1.29,8.5-1.94,12.75a2.54,2.54,0,0,1-2.71,2.07c-4.46-.4-8.93-.73-13.38-1.24-2.76-.32-5.47-1-8.23-1.39-2.19-.29-4.43-.15-6.6-.48-2.37-.35-4.67-1.2-7-1.5a40.7,40.7,0,0,0-6.69-.11,57.46,57.46,0,0,0-7.3.64c-5,.85-9.08-1.6-13.34-3.48-1.72-.76-3.44-1.55-5.22-2.15-1.23-.42-1.85-.89-1.47-2.33A24.77,24.77,0,0,0,132.87,122.67Z" style="fill: #8ecea3"/>

<text transform="translate(171.27 128.05)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">04</text></a>

<a xlink:href="#"><path id="area 05" class="map-highlight" d="M154.85,202.69c-.7-5.41-2-10.33-4.76-14.78-2.5-4.05-3.48-8.62-4.46-13.19-.56-2.61-1.25-5.2-2-7.78a10,10,0,0,0-4-5.27c-2.52-2-5.14-3.73-7.1-6.49a18,18,0,0,0-9.41-6.57c-2.26-.72-4.48-1.46-6.22-3.21-1.42-1.42-1.58-3.42,0-4.67,2.31-1.8,4.85-3.3,7.27-5a69,69,0,0,0,6.19-4.46c1.29-1.12,2.18-.33,3.18.12,3.49,1.55,6.87,3.37,10.43,4.71,4.29,1.61,8.78,1.7,13.36,1.37,3-.22,6.07.29,9.11.48,2,.13,4.08.24,6.11.44,5.07.49,10.14,1,15.21,1.56,5.22.59,10.43,1.29,15.64,1.9.95.11,1.19.3,1,1.36-1.39,6.5-2.73,13-3.94,19.54-.66,3.56-1.07,7.17-1.55,10.76s-.89,7.19-1.31,10.79c-.18,1.59-1.56,1.93-2.63,2.37-5.19,2.11-10.43,4.09-15.65,6.11-4.69,1.82-9.41,3.57-14.07,5.46-3,1.24-6,2.68-9,4A11,11,0,0,1,154.85,202.69Z" style="fill: #75c6a2"/>

<text transform="translate(158.9 163.75)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">05</text></a>

<a xlink:href="#"><path id="area 6" class="map-highlight" d="M95.11,151.26c1.6-.09,3.13.15,4.42-.31,2.54-.89,4.95-2.16,7.4-3.28,2.17-1,4.32-2,6.57-3.07.9,1.34,1.77,2.45,2.44,3.67,1.36,2.44,3.88,2.85,6.15,3.69,3.71,1.38,7.08,3.15,9.69,6.31,2.32,2.81,5,5.3,7.56,7.93a15,15,0,0,1,3.51,7.14c.8,3.25,1.24,6.59,2.07,9.83.37,1.42,1.37,2.67,2,4,1.31,2.84,2.64,5.68,3.83,8.57a41.46,41.46,0,0,1,1.51,4.79c.29,1,.45,2.12.7,3.34-2.94,0-5.63.12-8.31,0s-5.46-.49-8.17-.88c-3.47-.49-6.93-1.1-10.39-1.67q-4.49-.74-9-1.51c-2.54-.44-5.09-.86-7.62-1.37-2-.4-3.94-1.07-6-1.37-1.43-.21-1.35-1.19-1.3-2,.22-3.65.9-7.31.74-10.93a37.85,37.85,0,0,0-1.87-9.65c-1.06-3.33-2.88-6.42-4-9.73a12.56,12.56,0,0,1-.51-5.39c.29-2.53.43-4.88-1.28-7C95.14,152.14,95.19,151.76,95.11,151.26Z" style="fill: #8fd1c5"/>

<text transform="translate(113.21 179.2)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">06</text></a>


<a xlink:href="#"><path id="area 2" class="map-highlight" d="M93.66,116.05c2.67-1.63,4.75-3.14,7-4.24a38,38,0,0,0,10.57-7,1.38,1.38,0,0,1,2-.36,5.46,5.46,0,0,0,3.52-.12,4.57,4.57,0,0,1,5.35,1.51,44.42,44.42,0,0,0,4,3.8c4.51,4,5.62,8.91,4.19,14.56-.63,2.47-.68,2.44-3.17,2.43-2.3,0-4.61-.11-6.9,0-3.49.23-6.6-.91-9.73-2.22-1.66-.69-3.47-1-5.17-1.62a41.6,41.6,0,0,1-6.49-2.57C97.11,119.27,95.68,117.72,93.66,116.05Z" style="fill: #75c6a2"/>

<text transform="translate(108.95 118.25)" style="font-size: 8px;fill: #fff;font-family: ArialMT, Arial">02</text></a>

<a xlink:href="#"><path id="area 01" class="map-highlight" d="M93.49,118.8c1.77,1.41,3.35,2.79,5.07,4a17.38,17.38,0,0,0,2.75,1c1,.45,1.9,1.08,2.89,1.53s2.16.89,3.26,1.27c2,.69,3.92,1.37,5.89,2a35.77,35.77,0,0,0,5.86,1.72,24.11,24.11,0,0,0,5.18-.31,10.5,10.5,0,0,1,3.15,0l-2,1.41c-3.43,2.38-6.77,4.92-10.33,7.08-2.33,1.41-3.86,4.57-10.29,6.55-3.25,2.29-8.91,3.48-10.29,3.8-.66-3.63-4.67-7-7.05-9.1-.63-.56-1.53-1.3-1.56-2-.13-3-.39-6.16.21-9.08.36-1.73,2.15-3.23,3.46-4.68s2.78-2.26,3-4.25C92.74,119.4,93.26,119.07,93.49,118.8Z" style="fill: #8ecea3"/>

<text transform="translate(94.08 136.82)" style="font-size: 8px;fill: #fff;font-family: ArialMT, Arial">01</text></a>


</svg>

Answer 1

将:hover选择器放在<a> - 标记的级别。然后，这将包括文本。

所以只需将css更改为：

a:hover .map-highlight {
  fill: #D01A20 !important;
}

a:hover .map-highlight {
  fill: #D01A20 !important;
}

<svg id="map example" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=http://www.w3.org/1999/xlink viewBox="0 20 300 300" xml:space="preserve">


<title>map example</title>


<a xlink:href="#"><path id="area 03" class="map-highlight" d="M174.13,101.66l-3.77,3.7a9.11,9.11,0,0,0-2.52,5.3c-.38,2.48-2.26,3.84-3.76,5.5a1.55,1.55,0,0,1-1.33.2c-2.48-.78-4.94-1.62-7.4-2.47a14,14,0,0,0-11.13.92c-2.79,1.38-5.35,3.23-8.06,4.76-1.94,1.1-2.12,1-2.32-1.15a10.43,10.43,0,0,0-2.64-6.11c-2.19-2.47-4.16-5.15-6.46-7.52a20.48,20.48,0,0,0-4.72-3.29,4.47,4.47,0,0,0-2.38,0c-1.07.12-2.12.34-3.18.52l-.25-.56c1-1.14,1.95-2.26,2.87-3.43,2.08-2.63,4.12-5.29,6.19-7.93,1.74-2.22,1.69-5,2.45-7.55.45-1.51.44-3.19,1.06-4.61,1-2.23,2.3-4.31,3.49-6.45.1-.18.3-.31.41-.48,1.57-2.46,1.57-2.46,3.75-.59l10.63,9.12c-.33.24-1.15.63-1.1.85a3.09,3.09,0,0,0,1,1.51c1.69,1.57,3.4,3.13,5.18,4.59a2,2,0,0,0,1.63.25c2.53-.8,4.41.23,6.3,1.8,3.78,3.16,7.69,6.18,11.52,9.29C171.06,99,172.53,100.32,174.13,101.66Z" style="fill: #8fd1c5"/>

<text transform="translate(133.32 102.78)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">03</text></a>

<a xlink:href="#"><path id="area 04" class="map-highlight" d="M132.87,122.67c3-.12,5.15-2,7.47-3.37,3.09-1.87,6.12-3.82,9.92-3.79a5.57,5.57,0,0,1,2,.33c2.59,1,5.29,1.84,7.57,3.6,2.61,2,4.78,1.45,6.89-1.07,2.86-3.41,4.08-7.47,5.37-11.56a3.29,3.29,0,0,1,1.25-1.59c1.3-.88,2.69-1.6,4.26-2.51,2.35,1.59,4.85,3.24,7.31,4.94A162.2,162.2,0,0,0,204.17,119c2.93,1.47,2.77,1.47,2.2,4.58-.77,4.23-1.29,8.5-1.94,12.75a2.54,2.54,0,0,1-2.71,2.07c-4.46-.4-8.93-.73-13.38-1.24-2.76-.32-5.47-1-8.23-1.39-2.19-.29-4.43-.15-6.6-.48-2.37-.35-4.67-1.2-7-1.5a40.7,40.7,0,0,0-6.69-.11,57.46,57.46,0,0,0-7.3.64c-5,.85-9.08-1.6-13.34-3.48-1.72-.76-3.44-1.55-5.22-2.15-1.23-.42-1.85-.89-1.47-2.33A24.77,24.77,0,0,0,132.87,122.67Z" style="fill: #8ecea3"/>

<text transform="translate(171.27 128.05)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">04</text></a>

<a xlink:href="#"><path id="area 05" class="map-highlight" d="M154.85,202.69c-.7-5.41-2-10.33-4.76-14.78-2.5-4.05-3.48-8.62-4.46-13.19-.56-2.61-1.25-5.2-2-7.78a10,10,0,0,0-4-5.27c-2.52-2-5.14-3.73-7.1-6.49a18,18,0,0,0-9.41-6.57c-2.26-.72-4.48-1.46-6.22-3.21-1.42-1.42-1.58-3.42,0-4.67,2.31-1.8,4.85-3.3,7.27-5a69,69,0,0,0,6.19-4.46c1.29-1.12,2.18-.33,3.18.12,3.49,1.55,6.87,3.37,10.43,4.71,4.29,1.61,8.78,1.7,13.36,1.37,3-.22,6.07.29,9.11.48,2,.13,4.08.24,6.11.44,5.07.49,10.14,1,15.21,1.56,5.22.59,10.43,1.29,15.64,1.9.95.11,1.19.3,1,1.36-1.39,6.5-2.73,13-3.94,19.54-.66,3.56-1.07,7.17-1.55,10.76s-.89,7.19-1.31,10.79c-.18,1.59-1.56,1.93-2.63,2.37-5.19,2.11-10.43,4.09-15.65,6.11-4.69,1.82-9.41,3.57-14.07,5.46-3,1.24-6,2.68-9,4A11,11,0,0,1,154.85,202.69Z" style="fill: #75c6a2"/>

<text transform="translate(158.9 163.75)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">05</text></a>

<a xlink:href="#"><path id="area 6" class="map-highlight" d="M95.11,151.26c1.6-.09,3.13.15,4.42-.31,2.54-.89,4.95-2.16,7.4-3.28,2.17-1,4.32-2,6.57-3.07.9,1.34,1.77,2.45,2.44,3.67,1.36,2.44,3.88,2.85,6.15,3.69,3.71,1.38,7.08,3.15,9.69,6.31,2.32,2.81,5,5.3,7.56,7.93a15,15,0,0,1,3.51,7.14c.8,3.25,1.24,6.59,2.07,9.83.37,1.42,1.37,2.67,2,4,1.31,2.84,2.64,5.68,3.83,8.57a41.46,41.46,0,0,1,1.51,4.79c.29,1,.45,2.12.7,3.34-2.94,0-5.63.12-8.31,0s-5.46-.49-8.17-.88c-3.47-.49-6.93-1.1-10.39-1.67q-4.49-.74-9-1.51c-2.54-.44-5.09-.86-7.62-1.37-2-.4-3.94-1.07-6-1.37-1.43-.21-1.35-1.19-1.3-2,.22-3.65.9-7.31.74-10.93a37.85,37.85,0,0,0-1.87-9.65c-1.06-3.33-2.88-6.42-4-9.73a12.56,12.56,0,0,1-.51-5.39c.29-2.53.43-4.88-1.28-7C95.14,152.14,95.19,151.76,95.11,151.26Z" style="fill: #8fd1c5"/>

<text transform="translate(113.21 179.2)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">06</text></a>


<a xlink:href="#"><path id="area 2" class="map-highlight" d="M93.66,116.05c2.67-1.63,4.75-3.14,7-4.24a38,38,0,0,0,10.57-7,1.38,1.38,0,0,1,2-.36,5.46,5.46,0,0,0,3.52-.12,4.57,4.57,0,0,1,5.35,1.51,44.42,44.42,0,0,0,4,3.8c4.51,4,5.62,8.91,4.19,14.56-.63,2.47-.68,2.44-3.17,2.43-2.3,0-4.61-.11-6.9,0-3.49.23-6.6-.91-9.73-2.22-1.66-.69-3.47-1-5.17-1.62a41.6,41.6,0,0,1-6.49-2.57C97.11,119.27,95.68,117.72,93.66,116.05Z" style="fill: #75c6a2"/>

<text transform="translate(108.95 118.25)" style="font-size: 8px;fill: #fff;font-family: ArialMT, Arial">02</text></a>

<a xlink:href="#"><path id="area 01" class="map-highlight" d="M93.49,118.8c1.77,1.41,3.35,2.79,5.07,4a17.38,17.38,0,0,0,2.75,1c1,.45,1.9,1.08,2.89,1.53s2.16.89,3.26,1.27c2,.69,3.92,1.37,5.89,2a35.77,35.77,0,0,0,5.86,1.72,24.11,24.11,0,0,0,5.18-.31,10.5,10.5,0,0,1,3.15,0l-2,1.41c-3.43,2.38-6.77,4.92-10.33,7.08-2.33,1.41-3.86,4.57-10.29,6.55-3.25,2.29-8.91,3.48-10.29,3.8-.66-3.63-4.67-7-7.05-9.1-.63-.56-1.53-1.3-1.56-2-.13-3-.39-6.16.21-9.08.36-1.73,2.15-3.23,3.46-4.68s2.78-2.26,3-4.25C92.74,119.4,93.26,119.07,93.49,118.8Z" style="fill: #8ecea3"/>

<text transform="translate(94.08 136.82)" style="font-size: 8px;fill: #fff;font-family: ArialMT, Arial">01</text></a>


</svg>

Answer 2

设置map-highlight元素的<a>类，然后调整css：

＆＃13;

.map-highlight:hover path {
  fill: #D01A20 !important;
}

＆＃13;

<svg id="map example" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=http://www.w3.org/1999/xlink viewBox="0 20 300 300" xml:space="preserve">


<title>map example</title>

<a xlink:href="#" class="map-highlight"><path id="area 03" d="M174.13,101.66l-3.77,3.7a9.11,9.11,0,0,0-2.52,5.3c-.38,2.48-2.26,3.84-3.76,5.5a1.55,1.55,0,0,1-1.33.2c-2.48-.78-4.94-1.62-7.4-2.47a14,14,0,0,0-11.13.92c-2.79,1.38-5.35,3.23-8.06,4.76-1.94,1.1-2.12,1-2.32-1.15a10.43,10.43,0,0,0-2.64-6.11c-2.19-2.47-4.16-5.15-6.46-7.52a20.48,20.48,0,0,0-4.72-3.29,4.47,4.47,0,0,0-2.38,0c-1.07.12-2.12.34-3.18.52l-.25-.56c1-1.14,1.95-2.26,2.87-3.43,2.08-2.63,4.12-5.29,6.19-7.93,1.74-2.22,1.69-5,2.45-7.55.45-1.51.44-3.19,1.06-4.61,1-2.23,2.3-4.31,3.49-6.45.1-.18.3-.31.41-.48,1.57-2.46,1.57-2.46,3.75-.59l10.63,9.12c-.33.24-1.15.63-1.1.85a3.09,3.09,0,0,0,1,1.51c1.69,1.57,3.4,3.13,5.18,4.59a2,2,0,0,0,1.63.25c2.53-.8,4.41.23,6.3,1.8,3.78,3.16,7.69,6.18,11.52,9.29C171.06,99,172.53,100.32,174.13,101.66Z" style="fill: #8fd1c5"/>

<text transform="translate(133.32 102.78)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">03</text></a></g>

<a xlink:href="#" class="map-highlight"><path id="area 04" d="M132.87,122.67c3-.12,5.15-2,7.47-3.37,3.09-1.87,6.12-3.82,9.92-3.79a5.57,5.57,0,0,1,2,.33c2.59,1,5.29,1.84,7.57,3.6,2.61,2,4.78,1.45,6.89-1.07,2.86-3.41,4.08-7.47,5.37-11.56a3.29,3.29,0,0,1,1.25-1.59c1.3-.88,2.69-1.6,4.26-2.51,2.35,1.59,4.85,3.24,7.31,4.94A162.2,162.2,0,0,0,204.17,119c2.93,1.47,2.77,1.47,2.2,4.58-.77,4.23-1.29,8.5-1.94,12.75a2.54,2.54,0,0,1-2.71,2.07c-4.46-.4-8.93-.73-13.38-1.24-2.76-.32-5.47-1-8.23-1.39-2.19-.29-4.43-.15-6.6-.48-2.37-.35-4.67-1.2-7-1.5a40.7,40.7,0,0,0-6.69-.11,57.46,57.46,0,0,0-7.3.64c-5,.85-9.08-1.6-13.34-3.48-1.72-.76-3.44-1.55-5.22-2.15-1.23-.42-1.85-.89-1.47-2.33A24.77,24.77,0,0,0,132.87,122.67Z" style="fill: #8ecea3"/>

<text transform="translate(171.27 128.05)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">04</text></a>

<a xlink:href="#" class="map-highlight"><path id="area 05" d="M154.85,202.69c-.7-5.41-2-10.33-4.76-14.78-2.5-4.05-3.48-8.62-4.46-13.19-.56-2.61-1.25-5.2-2-7.78a10,10,0,0,0-4-5.27c-2.52-2-5.14-3.73-7.1-6.49a18,18,0,0,0-9.41-6.57c-2.26-.72-4.48-1.46-6.22-3.21-1.42-1.42-1.58-3.42,0-4.67,2.31-1.8,4.85-3.3,7.27-5a69,69,0,0,0,6.19-4.46c1.29-1.12,2.18-.33,3.18.12,3.49,1.55,6.87,3.37,10.43,4.71,4.29,1.61,8.78,1.7,13.36,1.37,3-.22,6.07.29,9.11.48,2,.13,4.08.24,6.11.44,5.07.49,10.14,1,15.21,1.56,5.22.59,10.43,1.29,15.64,1.9.95.11,1.19.3,1,1.36-1.39,6.5-2.73,13-3.94,19.54-.66,3.56-1.07,7.17-1.55,10.76s-.89,7.19-1.31,10.79c-.18,1.59-1.56,1.93-2.63,2.37-5.19,2.11-10.43,4.09-15.65,6.11-4.69,1.82-9.41,3.57-14.07,5.46-3,1.24-6,2.68-9,4A11,11,0,0,1,154.85,202.69Z" style="fill: #75c6a2"/>

<text transform="translate(158.9 163.75)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">05</text></a>

<a xlink:href="#" class="map-highlight"><path id="area 6" d="M95.11,151.26c1.6-.09,3.13.15,4.42-.31,2.54-.89,4.95-2.16,7.4-3.28,2.17-1,4.32-2,6.57-3.07.9,1.34,1.77,2.45,2.44,3.67,1.36,2.44,3.88,2.85,6.15,3.69,3.71,1.38,7.08,3.15,9.69,6.31,2.32,2.81,5,5.3,7.56,7.93a15,15,0,0,1,3.51,7.14c.8,3.25,1.24,6.59,2.07,9.83.37,1.42,1.37,2.67,2,4,1.31,2.84,2.64,5.68,3.83,8.57a41.46,41.46,0,0,1,1.51,4.79c.29,1,.45,2.12.7,3.34-2.94,0-5.63.12-8.31,0s-5.46-.49-8.17-.88c-3.47-.49-6.93-1.1-10.39-1.67q-4.49-.74-9-1.51c-2.54-.44-5.09-.86-7.62-1.37-2-.4-3.94-1.07-6-1.37-1.43-.21-1.35-1.19-1.3-2,.22-3.65.9-7.31.74-10.93a37.85,37.85,0,0,0-1.87-9.65c-1.06-3.33-2.88-6.42-4-9.73a12.56,12.56,0,0,1-.51-5.39c.29-2.53.43-4.88-1.28-7C95.14,152.14,95.19,151.76,95.11,151.26Z" style="fill: #8fd1c5"/>

<text transform="translate(113.21 179.2)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">06</text></a>


<a xlink:href="#" class="map-highlight"><path id="area 2" d="M93.66,116.05c2.67-1.63,4.75-3.14,7-4.24a38,38,0,0,0,10.57-7,1.38,1.38,0,0,1,2-.36,5.46,5.46,0,0,0,3.52-.12,4.57,4.57,0,0,1,5.35,1.51,44.42,44.42,0,0,0,4,3.8c4.51,4,5.62,8.91,4.19,14.56-.63,2.47-.68,2.44-3.17,2.43-2.3,0-4.61-.11-6.9,0-3.49.23-6.6-.91-9.73-2.22-1.66-.69-3.47-1-5.17-1.62a41.6,41.6,0,0,1-6.49-2.57C97.11,119.27,95.68,117.72,93.66,116.05Z" style="fill: #75c6a2"/>

<text transform="translate(108.95 118.25)" style="font-size: 8px;fill: #fff;font-family: ArialMT, Arial">02</text></a>

<a xlink:href="#" class="map-highlight"><path id="area 01" d="M93.49,118.8c1.77,1.41,3.35,2.79,5.07,4a17.38,17.38,0,0,0,2.75,1c1,.45,1.9,1.08,2.89,1.53s2.16.89,3.26,1.27c2,.69,3.92,1.37,5.89,2a35.77,35.77,0,0,0,5.86,1.72,24.11,24.11,0,0,0,5.18-.31,10.5,10.5,0,0,1,3.15,0l-2,1.41c-3.43,2.38-6.77,4.92-10.33,7.08-2.33,1.41-3.86,4.57-10.29,6.55-3.25,2.29-8.91,3.48-10.29,3.8-.66-3.63-4.67-7-7.05-9.1-.63-.56-1.53-1.3-1.56-2-.13-3-.39-6.16.21-9.08.36-1.73,2.15-3.23,3.46-4.68s2.78-2.26,3-4.25C92.74,119.4,93.26,119.07,93.49,118.8Z" style="fill: #8ecea3"/>

<text transform="translate(94.08 136.82)" style="font-size: 8px;fill: #fff;font-family: ArialMT, Arial">01</text></a>


</svg>

＆＃13;

SVG图像映射悬停效果

2 个答案: