Set Cursor <symbol> Element

Ich habe ein HTML-SymbolSet Cursor <symbol> Element

<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>

, die ich verwenden möchte als Cursor sein. Ich bin vertraut mit den Cursor über JQuery wie folgt zu ändern:

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

Aber wie kann ich dies für ein <symbol> Element?

Quelle

2017-08-23 Scott H

Relevante CSS-Tricks-Artikel: https://css-tricks.com/using-css-cursors/#article-header-id- 1 Leider sieht es so aus, als würde ihre Demo mit einem SVG (wenn auch einem CSS/base64-kodierten) auf meinem Chrome für Mac OS nicht funktionieren. Aber Sie können ihre JS-Demo kopieren, indem Sie ein benutzerdefiniertes Element als "Cursor" verwenden, um der Maus zu folgen. –

Scheint nicht für SVG in Chrome unter Windows entweder zu funktionieren ... –

Ich bin für die Überprüfung suchen, aber nichts finden .. erscheint SVG und GIF-Unterstützung für benutzerdefinierte Cursor in Chrome ist kaputt .. versucht stabile und dev-Kanäle. Safari mag SVG, aber nicht base64 SVG oder GIF ... https://codepen.io/geoffgraham/pen/QNgoQW – daviestar

Sie können zwei <svg> Elemente festlegen, von denen eines Ihr SVG-Symbol und das andere das Element definiert. Dann können Sie mit Javascript einen Ereignis-Listener einstellen und die Position des gesamten <svg> (der, der Ihr Element enthält) ändern, wenn sich der Cursor des Benutzers bewegt. Außerdem habe ich den Standard-Browser-Cursor mit der CSS-Eigenschaft cursor: none ausgeblendet. Hier ist ein Arbeitscode:

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>

Sie müssen die Werte in newTransformRule optimieren Sie Ihre benutzerdefinierten Cursor mit dem Standard-Cursor zu zentrieren. Entfernen Sie die CSS-Regel, um die Anpassung durchzuführen.

Der Code funktioniert auf FF, Chrome und Edge.

Quelle

2017-08-29 15:29:54 Ivan

@ Ivan Antwort ist gut, aber auf diese Weise wird es besser funktionieren.

Ich habe gerade einige Änderungen

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>

Quelle

2017-09-04 09:53:44

Set Cursor <symbol> Element

Antwort

Verwandte Themen