低质量的 SVG 光标 (CSS)答案

【问题标题】：Low quality of SVG cursors (CSS)低质量的 SVG 光标 (CSS)
【发布时间】：2020-07-30 02:50:05
【问题描述】：

我对 svg 游标的质量（清晰度）有疑问。真的很低。我尝试设置不同的形状渲染值，但没有帮助。

使用示例：

cursor: url('./question.svg') 4 4, auto !important;

还有 svg：

<svg viewBox="0 0 512 512" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
  <title>
    question mark
  </title>
  <path d="M469.3 256a213.3 213.3 0 1 1-426.6 0 213.3 213.3 0 0 1 426.6 0zm-256-64a42.7 42.7 0 1 1 61.2 38.5 69.9 69.9 0 0 0-39.8 62.8 21.3 21.3 0 1 0 42.6 0c0-10.3 6-19.8 15.7-24.4A85.3 85.3 0 1 0 170.7 192a21.3 21.3 0 1 0 42.6 0zM256 405.3a32 32 0 1 0 0-64 32 32 0 0 0 0 64z" fill-rule="evenodd"/>
</svg>

我认为您可以轻松重现它，因为它总是会发生。

【问题讨论】：

您能否提供一个屏幕截图以使事情尽可能清晰？但是，我检查了这个链接 css-tricks.com/almanac/properties/c/cursor> 并且 more-parameters 游标属性有两个参数，例如：svg:hover { cursor: url(./question.svg), auto; }。那么...4 应该做什么？
@xKobalt：URL 和坐标，带有关键字后备。
@Sheppard25 我没有你说的质量问题
请告诉我们您使用的是哪种浏览器和设备，因为我刚刚在 Windows 上使用 Chrome 和 Edge 进行了测试，它们似乎都能很好地呈现光标。 @xKobalt 4s 是替代热点的坐标：developer.mozilla.org/nl/docs/Web/CSS/cursor
我可以在 Mac 上的 Chrome、FF、Safari 上重现该问题。 Safari 是（一次）最好的质量，但仍然不如这里看到的 png 那样清晰：gist.github.com/dsdsdsdsdsds/bd142334efcd81f0b30e

标签： html css svg cursor

【解决方案1】：

我认为这可能是 Chromium 中的一个错误。我没有像 Apple 的 Retina 显示器那样的 HighDPI 显示器，这就是我无法确认问题的原因。但是，我确实在 Chromium 的错误跟踪器上发现了这个仍未解决的错误：

Issue 325565: Custom SVG cursors are blurry on a HighDPI display

Chrome、Brave 甚至最新的 Edge 浏览器都是基于 Chromium 的，所以我希望它们都有相同的缺陷。这也应该可以解释为什么@rassoh 报告说 Safari 通过显示稍好一点的质量来表现不同。 Safari 不是基于 Chromium，但 Chromium 最初是基于 Safari/WebKit。我不知道为什么 FireFox 似乎有同样的问题，正如@rassoh 所报告的那样。虽然这可能与两个团队都忽略了在 HighDPI 屏幕中正确实现 SVG 光标渲染的情况有关，这在当时是一种罕见的情况。

恐怕除了等待修复此错误之外，我不知道如何解决此问题。也许您可以使用优化的 PNG 图像获得更好的结果。

编辑：我发现了一个类似的问题，人们似乎得出了相同的结论：

.svg not sharp on retina displays

【讨论】：