增加懸停區域

有這樣的一個SVG元素 -增加懸停區域

<path d="M0,5.26429605180997L6.078685485212741,-5.26429605180997 -6.078685485212741,-5.26429605180997Z" transform="translate(100,100)scale(0.8)" style="fill: rgb(0, 0, 0);"></path>

現在，這個元素是如此之小，盤旋在它是很辛苦。

如何增加懸停區域（保持此元素的區域相同），以便即使鼠標指向2 x左右，懸停事件也會被觸發？

來源

2014-07-08 Ishita

增加邊框寬度並使邊框寬度不透明度爲0，如果0不起作用使其爲0.01。 –

答案補充:) –

增加你筆畫寬度，使行程不透明到。如果不起作用，然後使它0.01

來源

2014-07-08 02:17:58

我假設你的意思是'stroke-width'和'stroke-opacity'屬性，因爲'border- *'不適用於svg的路徑元素。 –

@ErikDahlström - 是的，你說得對。更新 –

這不適合我 – puppeteer701

我的建議是創建另一個完全透明的svg元素，該元素位於處理懸停事件的那個對象上。例如

<path d="M0,5.26429605180997L6.078685485212741,-5.26429605180997 -6.078685485212741,-5.26429605180997Z" transform="translate(100,100)scale(2.0)" style="fill: rgb(0, 0, 0, 1.0);"></path>

我不知道，如果一個元素上增加懸停區域你所描述的方法是可行的。（如果是我很想知道怎麼辦。）

來源

2014-07-08 01:56:31 floomby

謝謝你floomby – Ishita

你不需要調整變換。只要給它一個看不見的中風就是你需要的厚度。 –

下面是一個示例：http://xn--dahlstrm-t4a.net/svg/interactivity/hover-invisible-stroke-compat.svg（懸停效果觸發器，當鼠標光標距離形狀比20px更近時）。 –

增加懸停區域

回答

相關問題