Как расположить вывод текста под кнопкой svg?

Question

У меня есть svg кнопка(точка на карте), к которой я обращаюсь посредством jquery. Не понимаю как сделать, чтобы при нажатие выходило снизу название города. Оно выходит, но я не могу название расположить под кнопкой(точкой). Через position: absolute и left, top получается, но может можно сделать это еще как-то?

$('#france-btn').click(function() {
  $(".france-btn").fadeToggle(100);
});

.france-btn {
  left: 41em;
  top: 52em;
  position: absolute;
  display: none;
  background: #407a9c;
  border-radius: 6px;
  color: #fff;
  font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
  text-align: center;
}

.circle {
  opacity: 1;
  fill: rgb(255, 255, 255);
  pointer-events: auto;
  stroke: rgb(0, 0, 0);
  stroke-width: 0.7px;
  stroke-opacity: 0.9;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<circle id="france-btn" class="circle" fill="#1e8346" stroke="#b6b6bf" stroke-width="0.5" stroke-miterlimit="10" cx="287.87772" cy="141.95212" r="6" pointer-events="auto" opacity="0.001"></circle>

<text class="france-btn">Париж</text>

БЛОГ НА HUSL

Как расположить вывод текста под кнопкой svg?

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