Как отобразить интерактивную область на кнопке / ссылке SVG? - PullRequest
Новая
       18

Как отобразить интерактивную область на кнопке / ссылке SVG?

0 голосов
/ 21 декабря 2018

Я использую значок в форме круга (из библиотеки font-awesome ), который действует как кнопка на моей странице.проблема в том, что интерактивная область значка имеет прямоугольную форму, как и любой другой элемент HTML.

есть ли способ ограничить интерактивную область круглой формой, поэтому кнопка работает только при нажатии внутри непрозрачной области ине когда вы нажимаете на прозрачную ограничивающую рамку?

Я знаю, что вы можете использовать карты для определения интерактивных областей на изображениях, но я новичок в SVG и не смог найти то же самое с SVG.

я тоже пробовал {border-radius: 50%} но безрезультатно.это значок, который я использую, и HTML-код:

https://fontawesome.com/icons/plus-circle?style=solid 

<div id="new_item">
  <span class="fas fa-plus-circle fa-4x"
        data-toggle="modal"
        data-target="#newEvent_modal">
  </span>
</div>

1 Ответ

0 голосов
/ 21 декабря 2018

Ваша идея использования border-radius:50% работает для меня: 

.floating-button {
  font-size:30px;
  display: block;
  border: 1px solid;
  width: 1em;
  height: 1em;
  text-align: center;
  border-radius: 50%;
  margin:2em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>

<div id="new_item">
  <a class="floating-button" href="#">
    <i class="fa fa-plus"></i>
  </a>
</div>

Обновление

ОП прокомментировал, что ищет SVG-совместимое решение.Также в этом случае border-radius: 50% пригодится: 

* {
  font-size: 32px;
  margin: 0;
  padding: 0;
}
svg {
  width: 1em;
}
a {
  border-radius: 50%;
  display: inline-block;
  width: 1em;
  height:1em;
  margin:1em;
  overflow:hidden;
  border:1px solid red;
}
<div id="new_item">
  <a class="floating-button" href="#">
  <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="32"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z" ></path></svg>
  </a>
 </div>
...