將<title>滑鼠懸停在 SVG 圖示上時，SVG將顯示為工具提示。
<div [inlineSVG]="'icons/forward-small.svg' | assetUrl"></div>
我不希望在將滑鼠懸停在 SVG 箭頭圖示上時顯示此工具提示（向前小）。我試圖設定 ( title="", matTooltip="", 或alt="在 Angular 中抑制 SVG 的標題工具提示") 但沒有奏效。ai 我還想在 SVG 上添加一個點擊監聽器。
如何在不洗掉 SVG 檔案中的標題元素的情況下抑制此工具提示？
uj5u.com熱心網友回復：
根據 MDN 檔案：
<title>元素中的文本不會作為圖形的一部分呈現，但瀏覽器通常將其顯示為工具提示。
瀏覽器將使用它<title>作為工具提示。一種解決方法是禁用pointer-events整個 svg 上的任何內容。
div svg{
pointer-events: none;
}
注意：如果您不希望在 SVG 上有任何點擊偵聽器，請使用它。
選項 2：
如何在不洗掉 SVG 檔案中的標題元素的情況下抑制此工具提示？
您可以通過<title></title>在實際之前插入一個空來操作 SVG<title>
let svg=document.querySelector('svg'); //Select your SVG
svg.querySelectorAll('title').forEach(item=>{
item.parentElement.innerHTML='<title></title>' item.parentElement.innerHTML;
});
uj5u.com熱心網友回復：
通過將以下樣式添加到 style.scss 檔案中，它可以正常作業，也可以在 SVG 上添加單擊偵聽器：
svg {
vertical-align: sub;
pointer-events: none;
}轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/366438.html
上一篇：Svg顏色不會從css顏色改變？