Как избавиться от заголовка при наведении мыши на шрифт svg icon (используя svg sprites) - PullRequest
Новая
       18

Как избавиться от заголовка при наведении мыши на шрифт svg icon (используя svg sprites)

0 голосов
/ 27 января 2019

Редактировать : этот вопрос не имеет значения, если вы используете Font Awesome v.> = 5.8.0, потому что его сопровождающие (после долгого обсуждения :)) согласились с тем, что"title" должен быть удален из файлов svg, и это сделано в v. 5.8.0: https://github.com/FortAwesome/Font-Awesome/issues/14595

Теперь вернемся к первоначальному вопросу:

Я только что попробовал Font Awesome(5) в его версии 'svg sprites', следуя официальному, довольно простому учебнику: https://fontawesome.com/how-to-use/on-the-web/advanced/svg-sprites

Все работает, как и ожидалось, за исключением того, что я могу увидеть заголовок, появляющийся при наведении курсора на изображение (котороеплохой).Я имею в виду тот, который мы видим, когда у нас есть, например, <div title = "blah"></div>.

Итак, в соответствии с документами (я полагаю), я скопировал файл 'sprites / normal.svg' на свой сервер и: 

<svg class = 'fa-svg-icon' title = 'my failed attempt to overwrite the title'>
    <use xlink:href="icons/font-awesome/sprites/solid.svg#user"></use>
</svg>

.fa-svgкласс -icon ', для полноты картины: 

.fa-svg-icon{
    width:1em;
    height:1em;
}

То, что я вижу при наведении курсора на изображение, это заголовок "Пользователь", который появляется.Это потому, что это то, что объявлено в файле svg во «нашем» фрагменте: 

<symbol id="user" viewBox="0 0 448 512">
    <title id="user-title">User</title>
    <path d="M224 256c70.7 0 ......"></path>
</symbol>

Я пытался добавить title = 'something' как к элементу svg, так и к элементу <use>, но ничего не работаетoO

Это происходит как на FX, так и на Chrome.

Редактировать 1 : я сделал тестовую страницу: https://kpion.github.io/stuff/font-awesome-issue/

Я почти уверенЯ упускаю что-то очевидное здесь, потому что, очевидно, я единственный в этом мире, кто имеет эту проблему ? Или гугл сломан.Один или другой:)

Редактировать 2 : Чтобы ответить на вопрос из комментариев, вот что показывает мой инструмент dev -> элементы в chrome (после «импорта» символа svg):

<svg class="fa-svg-icon" title="my -not-working-title for user">
    <use xlink:href="icons/font-awesome/sprites/solid.svg#user" title="blah - doesn't work either"></use>
    #shadow-root (closed)
    <svg id="user" viewBox="0 0 448 512" width="100%" height="100%">
        <title id="user-title">User</title>
        <path d="M224 256c70.7 0 128-57.3 128-..."></path>
    </svg>  
</svg>

И нет, оно не меняется при наведении курсора, имейте в виду, что здесь не задействованы js, ни мой, ни шрифт.

1 Ответ

0 голосов
/ 10 июля 2019

Я не могу воссоздать вашу кодовую среду в скрипке, чтобы попробовать сам, но вы можете попробовать следующий код CSS, чтобы получать события указателя только тогда, когда значок имеет ссылку: 

.fa-svg-icon{
  pointer-events: none;
}

.fa-svg-icon a {
  pointer-events: auto;
}
...