Как показать текст в svg path при наведении?

Question

Задача при наведении на path выводить сверху текст.

body {
  margin: 0;
  padding: 0;
}

.map {
  position: relative;
  text-align: center;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.part {
  opacity: .1;
}

.part:hover {
  transition: opacity .2s ease;
  opacity: .6;
  cursor: pointer;
}

.subtext {
  display: none;
}

.subtext:hover {
  display: block;
  font-size: 50px;
  fill: black;
}

<div class="map">
  <svg viewBox="0 0 1266.6667 1265.3333">
    <a class="link" href="#">
     <path class="part" d="m 682.52231,687.56144 c 39.6251,-3.10877 73.1099,-3.14737 106.94156,-3.35942 64.5997,-2.06647 104.21557,0.62589 137.73625,4.47923 51.54049,2.29863 94.88368,10.45248 136.05658,20.15653 50.7688,10.94482 77.6826,26.09934 103.5821,41.43285 34.1469,21.0897 55.7721,42.17939 70.5478,63.26909 18.3363,28.69978 22.0254,44.37975 27.4353,61.58938 2.6795,38.3489 -3.265,65.19908 -13.9976,85.66523 -18.1427,32.44128 -42.204,54.22897 -67.7483,73.34737 -22.6156,13.194 -45.1345,26.4461 -75.0271,35.2739 -8.4784,0.2403 -15.3578,6.8769 -22.3961,12.8778 l -5.0391,12.3179 c -6.8752,29.7507 -17.8269,49.3098 -27.4353,72.2275 -16.2683,27.7074 -35.9928,49.3666 -58.22996,66.6285 -25.72269,18.4222 -48.26815,22.5469 -71.10774,27.9952 -24.35075,-1.1294 -47.45131,-0.01 -78.94638,-13.9976 -56.98469,-30.6918 -92.98342,-78.3723 -118.69954,-134.3768 -23.98877,-69.2652 -40.02648,-140.69877 -47.59179,-214.44305 -7.61398,-54.13161 -8.70302,-109.5682 -8.95846,-165.17152 v -35.83382 c 5.36988,-10.66337 8.83646,-7.38393 12.87778,-10.07827 z" fill="#669900">
    </a>
    <text class="subtext" x="825.43402" y="925.43402">Пшеница</text>
  </svg>
  <img src="http://kaliniov.beget.tech/wp-content/uploads/2021/07/clever.jpg" alt="">
</div>

Answer 1

Вы делаете событие наведения (hover) при наведении на сам path и на сам текст а надо при наведении на родителя то есть на .map

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.map {
  position: relative;
  text-align: center;
  width: 640px;
  height: 480px;
  border: 1px solid red;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.part {
  opacity: 0.1;
}

.map:hover .part {
  transition: opacity 0.2s ease;
  opacity: 0.6;
  cursor: pointer;
}

.subtext {
  display: none;
}

.map:hover .subtext {
  display: block;
  font-size: 50px;
  fill: black;
}

<div class="map">
  <svg viewBox="0 0 1266.6667 1265.3333">
    <a class="link" href="#">
      <path class="part" d="m 682.52231,687.56144 c 39.6251,-3.10877 73.1099,-3.14737 106.94156,-3.35942 64.5997,-2.06647 104.21557,0.62589 137.73625,4.47923 51.54049,2.29863 94.88368,10.45248 136.05658,20.15653 50.7688,10.94482 77.6826,26.09934 103.5821,41.43285 34.1469,21.0897 55.7721,42.17939 70.5478,63.26909 18.3363,28.69978 22.0254,44.37975 27.4353,61.58938 2.6795,38.3489 -3.265,65.19908 -13.9976,85.66523 -18.1427,32.44128 -42.204,54.22897 -67.7483,73.34737 -22.6156,13.194 -45.1345,26.4461 -75.0271,35.2739 -8.4784,0.2403 -15.3578,6.8769 -22.3961,12.8778 l -5.0391,12.3179 c -6.8752,29.7507 -17.8269,49.3098 -27.4353,72.2275 -16.2683,27.7074 -35.9928,49.3666 -58.22996,66.6285 -25.72269,18.4222 -48.26815,22.5469 -71.10774,27.9952 -24.35075,-1.1294 -47.45131,-0.01 -78.94638,-13.9976 -56.98469,-30.6918 -92.98342,-78.3723 -118.69954,-134.3768 -23.98877,-69.2652 -40.02648,-140.69877 -47.59179,-214.44305 -7.61398,-54.13161 -8.70302,-109.5682 -8.95846,-165.17152 v -35.83382 c 5.36988,-10.66337 8.83646,-7.38393 12.87778,-10.07827 z" fill="#669900">
    </a>
    <text class="subtext" x="825.43402" y="925.43402">Пшеница</text>
  </svg>
  <img src="http://kaliniov.beget.tech/wp-content/uploads/2021/07/clever.jpg" alt="">
</div>

БЛОГ НА HUSL

Как показать текст в svg path при наведении?

Ответы (1 шт):