如何旋转 CSS 光标答案

【问题标题】：How can I rotate a css cursor如何旋转 CSS 光标
【发布时间】：2017-06-29 05:32:17
【问题描述】：

这是您需要做的事情才能清楚地了解我想要什么

继续this editor
创建一个形状
选择它
旋转它
将鼠标放在调整大小控制点之一上，然后单击

您会看到光标随着形状的角度旋转。

我找不到任何 CSS 属性来实现这种事情，这怎么能做到？

【问题讨论】：

标签： css svg transform

【解决方案1】：

你不能，它也不会。它只显示不同的调整大小图标。例如：http://css-cursor.techstream.org/

【讨论】：

谢谢，我将不得不等待并接受这个答案

【解决方案2】：

我需要一个用于轮播的旋转箭头光标。这是我想出的：

https://codepen.io/addison912/pen/MWwmpoz

首先隐藏css中的默认光标：

body * {
  cursor: none;
}

将您要使用的光标图像添加到 html：

<div id="cursor">
    <img alt="Cursor Arrow" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Arrow-down.svg"/>
</div>

此图像需要跟踪光标位置：

let currentCursorPos;
let cursorEl = document.querySelector("#cursor");

window.addEventListener("mousemove", event => {
  currentCursorPos = { x: event.clientX, y: event.clientY };
  cursorEl.style.transform = `translate(${currentCursorPos.x}px, ${currentCursorPos.y}px)`;
})

现在您可以根据需要旋转#cursor img。

【讨论】：

【解决方案3】：

是的，在现代浏览器（Chrome、Firefox、Safari）中，您可以使用编码为数据 URI 的 SVG 作为 CSS 光标：

cursor: url("data:image/svg+xml, ... ") 16 16, auto;

对 SVG 进行编码可能会很棘手，但这里有详细的记录： https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

诀窍是动态修改编码的 SVG 的变换属性：

<svg viewBox="32 32"><g transform="rotate(45, 16, 16)">...</g></svg>

例如，在上面的示例中，您可以将45 换成您想要的角度。

【讨论】：