时间戳

首页 > 解决方案 > 自定义光标 SVG 模糊

css - 自定义光标 SVG 模糊

问题描述

我有一个使用两个旋转矩形的内联 SVG 图像定义的自定义光标。虽然它可以工作，但我惊讶地发现它在 Chrome 中很模糊。我可以做些什么来锐化边缘吗？

.not-allowed{cursor:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cmVjdCB0cmFuc2Zvcm09InJvdGF0ZSg0NSkiIHg9IjkuMjc2MyIgeT0iLTgiIHdpZHRoPSI0LjA3NDkiIGhlaWdodD0iMTYiIGZpbGw9IiMyMjIiLz48cmVjdCB0cmFuc2Zvcm09InJvdGF0ZSgxMzUpIiB4PSItMi4wMzc0IiB5PSItMTkuMzE0IiB3aWR0aD0iNC4wNzQ5IiBoZWlnaHQ9IjE2IiBmaWxsPSIjMjIyIi8+PC9zdmc+') 8 8, not-allowed}

基于@enxaneta 的链接使其更具可读性：

.not-allowed{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Crect transform='rotate%2845%29' x='9.2763' y='-8' width='4.0749' height='16' fill='%23222'/%3E%3Crect transform='rotate%28135%29' x='-2.0374' y='-19.314' width='4.0749' height='16' fill='%23222'/%3E%3C/svg%3E") 8 8, not-allowed}

标签： csssvg

解决方案

推荐阅读