製作SVG的文本不可選

編輯：這是我的SVG的所有元素，以完成我需要

<g id="top"> 
<path ....> 
</g> 
<g id="bottom"> 
<path ....> 
</g> 
<g id="boxes"> 
<rect ....> 
</g> 
<g id="txt"> 
<text transform="matrix(1 0 0 1 50 30)" class="svgtxt">TEXT</text> 
</g>

效果目前，如果我將鼠標懸停在將鼠標懸停在「TEXT」字樣上我可以選擇它。

我試圖找到一種方法，使其不被選擇，使用CSS和jQuery（如下），但似乎沒有任何工作。我也找不到任何類似的東西。

CSS

.svgtxt{ 
    -webkit-touch-callout: none; 
    -webkit-user-select:none; 
    -khtml-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select:none; 
    -o-user-select:none; 
    user-select:none; 
}

JQUERY

$('#txt text').onmousedown = function() { return false; };

任何想法？

在此先感謝。

來源

2015-12-23 JustQn4

你能不能換一種透明的，或非常接近透明，元素在它上面的Z順序？ –

工作得很好，我 - > **的https：//jsfiddle.net/adeneo/72LvL8n6/** – adeneo

'-webkit-用戶選擇的增加一個內嵌樣式（對文本元素）：無;'對我的作品在Chrome - 可能還需要一個'光標：默認;' – click2install

您可以禁用pointer-events如果你不需要任何交互：

指針的事件屬性允許創作者控制的元素是否或何時可以是鼠標事件的目標。該屬性用於指定在哪個情況下（如果有的話）鼠標事件應該「穿過」一個元素，並針對該元素下方的任何內容。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events

.svgText { 
    pointer-events: none; 
}

來源

2015-12-24 00:32:52 iH8

謝謝。這對我的代碼來說很好，我需要完成。 – JustQn4

我發現這在android上不起作用。點擊一個帶有「onclick」的元素後，文本選擇指示符出現，「Select All」氣球也隨之顯示。 –

製作SVG的文本不可選

回答

相關問題