2017-08-23 26 views
36

मैं एक HTML प्रतीकसेट कर्सर <symbol> तत्व

<symbol id="arrow" viewBox="0 0 8.4666659 8.4666659"> 
    <g transform="translate(0,-288.53334)"> 
    <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 0.17215798,288.70836 8.05225192,8.04935"></path> 
    <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 8.2221335,293.64243 0.00228,3.11528 -3.1283502,2.2e-4"></path> 
    </g> 
</symbol> 

जो मैं कर्सर के रूप में उपयोग करना चाहते हैं हो सकता है। मैं इस तरह JQuery के माध्यम से कर्सर को बदलने से परिचित हूँ:

body.css('cursor', `wait`); 

लेकिन मैं कैसे एक <symbol> तत्व के लिए ऐसा कर सकते हैं?

+1

प्रासंगिक सीएसएस-ट्रिक्स लेख: https://css-tricks.com/using-css-cursors/#article-header-id- 1 दुर्भाग्य से, एक एसवीजी (हालांकि एक सीएसएस/बेस 64-एन्कोडेड एक) का उपयोग करने के उनके डेमो की तरह दिखता है मैकोज़ के लिए मेरे क्रोम पर काम नहीं करता है। लेकिन आप माउस का पालन करने के लिए "कर्सर" के रूप में एक कस्टम तत्व का उपयोग करने के अपने जेएस डेमो की प्रतिलिपि बना सकते हैं। –

+0

विंडोज़ पर क्रोम में एसवीजी के लिए काम नहीं कर रहा है ... –

+0

मैं इसके सत्यापन के लिए चारों ओर देख रहा हूं लेकिन कुछ भी नहीं मिला .. दिखाई देता है क्रोम में कस्टम कर्सर के लिए एसवीजी और जीआईएफ समर्थन टूटा हुआ है .. कोशिश की स्थिर और देव चैनल। सफारी एसवीजी पसंद करती है, लेकिन बेस 64 एसवीजी या जीआईएफ नहीं ... https://codepen.io/geoffgraham/pen/QNgoQW – daviestar

उत्तर

18

आप दो <svg> तत्वों को एक सेट कर सकते हैं जो आपके एसवीजी प्रतीक को परिभाषित करने के लिए और दूसरे तत्व को पकड़ने के लिए सेट कर सकते हैं। फिर जावास्क्रिप्ट के साथ, आप एक ईवेंट श्रोता सेट कर सकते हैं और उपयोगकर्ता के कर्सर को चलाते समय पूरे <svg> (आपके तत्व को धारण करने वाला) की स्थिति बदल सकते हैं। साथ ही, मैंने सीएसएस प्रॉपर्टी cursor: none के साथ डिफ़ॉल्ट ब्राउज़र कर्सर छुपाया है। यहाँ एक काम कोड है:

document.addEventListener('mousemove', function(e) { 
 

 
    let newTransformRule = 'translate(' + (e.pageX - 360) + 'px, ' + (e.pageY - 115) + 'px)'; 
 

 
    document.querySelector('#arrowCanvas').style.transform = newTransformRule; 
 

 
});
body { 
 
    cursor: none; 
 
}
<svg> 
 
    <symbol id="arrow" viewBox="0 0 8.4666659 8.4666659"> 
 
    <g transform="translate(0,-288.53334)"> 
 
     <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 0.17215798,288.70836 8.05225192,8.04935"></path> 
 
     <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 8.2221335,293.64243 0.00228,3.11528 -3.1283502,2.2e-4"></path> 
 
    </g> 
 
    </symbol> 
 
</svg> 
 

 
<svg id="arrowCanvas" width="100" height="60"> 
 
    <use href="#arrow" width="100" height="50"/> 
 
</svg>

आप newTransformRule में मूल्यों tweak करने के लिए डिफ़ॉल्ट कर्सर के साथ अपने कस्टम कर्सर केंद्रित करने के लिए होगा। समायोजन करने के लिए सीएसएस नियम निकालें।

कोड एफएफ, क्रोम और एज पर काम कर रहा है।

0

@Ivan उत्तर अच्छा है, लेकिन, इस तरह यह बेहतर काम करेगा।

मैं बस कुछ बदलाव

बनाया

document.addEventListener('mousemove', function(e) { 
 

 
    let newTransformRule = 'translate(' + (e.pageX - 380) + 'px, ' + (e.pageY - 60) + 'px)'; 
 

 
    document.querySelector('#arrowCanvas').style.transform = newTransformRule; 
 

 
});
body { 
 
    cursor: none; 
 
} 
 

 
#arrowCanvas { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    z-index: -1; 
 
}
<svg id="arrowContainer"> 
 
    <symbol id="arrow" viewBox="0 0 8.4666659 8.4666659"> 
 
    <g transform="translate(0,-288.53334)"> 
 
     <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 0.17215798,288.70836 8.05225192,8.04935"></path> 
 
     <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 8.2221335,293.64243 0.00228,3.11528 -3.1283502,2.2e-4"></path> 
 
    </g> 
 
    </symbol> 
 
</svg> 
 

 
<svg id="arrowCanvas" width="100" height="60"> 
 
    <use href="#arrow" width="100" height="50"/> 
 
</svg>

संबंधित मुद्दे