Блог

SVG lt;titlegt; отображается в виде всплывающей подсказки при наведении курсора мыши на значок SVG.

 lt;div [inlineSVG]="'icons/forward-small.svg' | assetUrl"gt;lt;/divgt; 

Я не хочу, чтобы эта всплывающая подсказка (маленькая вперед) отображалась при наведении курсора на значок стрелки SVG. Я попытался установить ( title="" , matTooltip="" , или alt="" ), но это не сработало. ai Я также хочу добавить прослушиватель кликов в SVG.

Как я могу подавить эту подсказку, не удаляя элемент заголовка из файла SVG?

Согласно документам MDN:

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

Браузеры будут использовать это lt;titlegt; в качестве всплывающей подсказки. Одним из обходных путей было бы отключить любой pointer-events из них на всей svg.

 div svg{ pointer-events: none; }  

Примечание: Используйте его, если вы не хотите, чтобы в SVG были прослушиватели щелчков.

Вариант 2:

Как я могу подавить эту подсказку, не удаляя элемент заголовка из файла SVG?

Вы можете манипулировать SVG, вставляя пустое lt;titlegt;lt;/titlegt; значение перед фактическим lt;titlegt;

 let svg=document.querySelector('svg'); //Select your SVG svg.querySelectorAll('title').forEach(item=gt;{  item.parentElement.innerHTML='lt;titlegt;lt;/titlegt;' item.parentElement.innerHTML; });  

Он отлично работает, добавляя следующие стили в файл styles.scss, а также можно добавлять прослушиватели кликов в SVG:

 svg {  vertical-align: sub;  pointer-events: none;  }