自定义SVG光标在Lightbox按钮中不显示问题求助

问题场景 #

在Lightbox切换按钮中使用自定义SVG作为光标，已确认URL路径和尺寸设置无误，但SVG光标仍无法显示。以下是用户提供的代码：

按钮CSS代码 #

#next-button {
cursor: url('http://leonardodevito.local/wp-content/themes/leonardo_devito/img/vector_58.svg'), default !important;
height: 100vh;
}
#previous-button {
cursor: url('http://leonardodevito.local/wp-content/themes/leonardo_devito/img/vector_62_copia.svg'), default !important;
height: 100vh;
}

svg {
  width: 100% !important
  height: 100% !important;
}

SVG文件代码 #

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.5.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg width="73" height="144" version="1.1" id="Level_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 73 144" style="enable-background:new 0 0 73 144;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#000000;}
</style>
<path class="st0" d="M1,143l71-71L1,1"/>
</svg>

排查与修复步骤 #

1. 修复CSS语法错误 #

用户提供的CSS中，svg选择器的width属性后缺失分号，导致height属性无法生效，修正后代码：

svg {
  width: 100% !important; /* 补上缺失的分号 */
  height: 100% !important;
}

2. 为SVG光标指定热点与尺寸 #

部分浏览器需要在cursor属性中明确指定光标热点坐标和尺寸，否则可能无法正确渲染。热点坐标设置为SVG中心位置，适配交互体验：

#next-button {
cursor: url('http://leonardodevito.local/wp-content/themes/leonardo_devito/img/vector_58.svg') 36 72, default !important;
/* 36为x轴热点，72为y轴热点，对应SVG宽73、高144的中心 */
height: 100vh;
}
#previous-button {
cursor: url('http://leonardodevito.local/wp-content/themes/leonardo_devito/img/vector_62_copia.svg') 36 72, default !important;
height: 100vh;
}

3. 优化SVG代码兼容性 #

移除SVG中冗余属性，简化内联样式，避免浏览器解析异常，优化后的SVG代码：

<?xml version="1.0" encoding="utf-8"?>
<svg width="73" height="144" viewBox="0 0 73 144" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="#000000" d="M1,143l71-71L1,1"/>
</svg>

4. 验证文件可访问性与浏览器支持 #

• 直接在浏览器地址栏输入SVG文件URL，确认文件能正常加载，若无法显示需检查文件权限或服务器配置
• 确保测试环境为现代浏览器（Chrome、Firefox、Edge等），旧版浏览器对SVG光标支持有限，必要时可将SVG转为PNG格式备用

内容的提问来源于stack exchange，提问作者Luca