wordpress SVG按钮光标不可见

oaxa6hgo 于 2023-08-03 发布在 WordPress

关注(0)|答案(1)|浏览(121)

我有这些自定义的svg图标，我使用在lightbox中来回移动。我认为我把一切都设置正确了：URL是正确的，大小也是，但他们仍然没有显示出来。
下面是按钮的代码：

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

型
我有这些自定义的svg图标，我使用在lightbox中来回移动。我认为我把一切都设置正确了：URL是正确的，大小也是，但他们仍然没有显示出来。

wordpress

来源：https://stackoverflow.com/questions/76779660/svg-button-cursor-not-visible

1条答案

按热度按时间

xzv2uavs1#

用作光标的图像大小不能超过128x128：图标大小限制|MDN.所以，在这里我已经减少了大小：
上一篇：

<?xml version="1.0" encoding="utf-8"?>
<svg width="64" height="128" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100">
  <path fill="none" stroke="black" d="M 49 1 L 1 50 L 49 99"/>
</svg>

字符串
下一页：

<?xml version="1.0" encoding="utf-8"?>
<svg width="64" height="128" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100">
  <path fill="none" stroke="black" d="M 1 1 L 50 49 L 1 99"/>
</svg>

型

body {
  display: flex;
  justify-content: space-between;
}

#next-button {
  cursor: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iMTI4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCAxMDAiPgo8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBkPSJNIDEgMSBMIDUwIDQ5IEwgMSA5OSIvPgo8L3N2Zz4KCgo='), default !important;
  height: 100vh;
  width: 25%;
}

#previous-button {
  cursor: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iMTI4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCAxMDAiPgo8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBkPSJNIDQ5IDEgTCAxIDUwIEwgNDkgOTkiLz4KPC9zdmc+CgoK'), default !important;
  height: 100vh;
  width: 25%;
}

<div id="previous-button"></div>
<div id="next-button"></div>

的字符串

赞(0）回复(0）举报 2023-08-03

我来回答

wordpress SVG按钮光标不可见

1条答案

相关问题

热门标签

最新问答