एचटीएमएल 5 - क्रोम में एसवीजी टेक्स्ट चयन बग?

Question

मैं पथ और पाठ खींचने के लिए एसवीजी का उपयोग करके एचटीएमएल 5 में एक वेब अनुप्रयोग विकसित कर रहा हूं। ओएस एक्स पर क्रोम के साथ परीक्षण, मैं कुछ बदसूरत व्यवहार में आया जो क्रोम में एक बग प्रतीत होता है।

एसवीजी टेक्स्ट की निम्न न्यूनतम उदाहरण एक पथ से पार कर पर विचार करें:

<svg height="200" width="200"> 
    <text x="50" y="50" fill="#000" font-size="50" style="pointer-events: none;"> 
     <tspan x="5" dy="0">Test Text</tspan> 
    </text> 
    <path d="M 0 0 L 100 100" stroke="#000" stroke-width="5"></path> 
</svg> 

(http://jsfiddle.net/wPYvS/)

मैं एसवीजी पाठ का चयन किया जाना (या हाइलाइट किया गया) नहीं करना चाहती जब यह खत्म हो गया खींचकर कर्सर के साथ। इसलिए मैंने सीएसएस विशेषता "पॉइंटर-इवेंट्स: नो" जोड़ा, जो क्रोम को छोड़कर सभी ब्राउज़रों में अपेक्षित काम करता है। क्रोम में, जब आप केवल टेक्स्ट पर खींच रहे होते हैं, तो कुछ भी नहीं चुना जाता है। लेकिन अगर आप पाठ पर खींच रहे हैं जहां पथ रास्ते में है (इसलिए, वास्तव में आप पथ पर खींच रहे हैं), टेक्स्ट हाइलाइट किया गया है।

मैं क्रोम और ओएस एक्स और विंडोज़ में इसे पुन: उत्पन्न करने में सक्षम था लेकिन फ़ायरफ़ॉक्स, ओपेरा या सफारी के साथ नहीं।

क्या कोई कामकाज है जिसका उपयोग मैं सभी ब्राउज़रों में टेक्स्ट चयन को पूरी तरह से रोकने के लिए कर सकता हूं?

अग्रिम धन्यवाद!

Answer 1

आप एक सीएसएस छद्म चयनकर्ता के साथ चयन हाइलाइट रंग सेट कर सकते हैं।

svg text::selection { background: none; } 

संदर्भ here।

Answer 2

::selectionbackground और color के साथ चयन रंग शैली के लिए उपयोगी है। जबकि ::selection { background: none; } काम करता है, चयन अभी भी सक्षम हैं लेकिन पृष्ठभूमि रंग के साथ "मुखौटा" है।

वास्तव में चयन अक्षम करने का सही तरीका user-select: none का उपयोग करना है।

#div, .class { 
    -webkit-user-select: none; /* Chrome all/Safari all */ 
    -moz-user-select: none;  /* Firefox all */ 
    -ms-user-select: none;  /* IE 10+ */ 
} 

संदर्भ here।
आपका JSFiddle updated।