这是我的密码。如您所见,我想使用内联svg用一个自定义的光标来更改光标,但不起作用。然而,如果我把代码作为背景,工作良好:
null
.container {
width: 50vw;
height: 50vh;
background-color:#ccc;
cursor: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 200 199.99999' xml:space='preserve' sodipodi:docname='close-icon.svg' inkscape:version='1.0 (4035a4fb49, 2020-05-01)' width='200' height='200'%3E%3Cmetadata id='metadata852'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs850' /%3E%3Csodipodi:namedview pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1' objecttolerance='10' gridtolerance='10' guidetolerance='10' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:window-width='1366' inkscape:window-height='705' id='namedview848' showgrid='false' inkscape:zoom='1.6244302' inkscape:cx='-6.1504656' inkscape:cy='92.478743' inkscape:window-x='-8' inkscape:window-y='-8' inkscape:window-maximized='1' inkscape:current-layer='Layer_1' inkscape:document-rotation='0' inkscape:snap-global='true' /%3E%3Cg id='g817'%3E%3C/g%3E%3Cg id='g819'%3E%3C/g%3E%3Cg id='g821'%3E%3C/g%3E%3Cg id='g823'%3E%3C/g%3E%3Cg id='g825'%3E%3C/g%3E%3Cg id='g827'%3E%3C/g%3E%3Cg id='g829'%3E%3C/g%3E%3Cg id='g831'%3E%3C/g%3E%3Cg id='g833'%3E%3C/g%3E%3Cg id='g835'%3E%3C/g%3E%3Cg id='g837'%3E%3C/g%3E%3Cg id='g839'%3E%3C/g%3E%3Cg id='g841'%3E%3C/g%3E%3Cg id='g843'%3E%3C/g%3E%3Cg id='g845'%3E%3C/g%3E%3Cpath d='M 4.6524564e-7,4.3710052 195.62899,200 200,195.62899 4.371006,-2.5331698e-7 Z' style='fill:%23000000;stroke:none;stroke-width:7.43033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:0.959839' id='rect961' /%3E%3Cpath id='path862' style='fill:%23000000;stroke:none;stroke-width:7.43033;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:0.959839' d='M 200,4.3710052 4.3710079,200 4.6524564e-7,195.62899 195.62899,-2.5331698e-7 Z' /%3E%3C/svg%3E%0A");
}
<div class="container"></div>
null
你有两个问题:
在数据URL后面添加,auto
:
cursor: url(data:image/png;base64,...), auto;
您应该将回退设置为自动。