svg完成鼠标样式并使用

news2024/11/15 17:34:42

本次分享的是通过svg标签实现的鼠标样式，并在页面中进行使用的整个过程，最后还会分享快速制作svg的简单方式。

如有改进的方法或者发现错误也可以在评论区留言啊。

一、鼠标的svg样式

1.小飞机型

    <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
      <g>
        <title>Layer 1</title>
        <path id="svg_14" d="m343.99998,225.90477" opacity="NaN" stroke="#000" fill="none" />
        <path id="svg_18" d="m305.71414,270.95231" opacity="NaN" stroke="#000" fill="#d4aaff" />
        <path stroke="#000" id="svg_19"
          d="m227.24757,58.25095c-0.35356,0 -0.66812,0.13387 -0.93353,0.3767c-0.26518,0.24263 -0.48453,0.59029 -0.66705,1.02449c-0.365,0.86827 -0.58952,2.088 -0.71234,3.54874c-0.12257,1.45793 -0.14323,3.15554 -0.09231,4.97281c-4.36735,1.65257 -13.22515,5.06469 -13.93671,5.82654c-0.94736,1.01432 -0.64127,2.17679 -0.25951,2.94849l14.56196,-2.73373c0.30781,3.56252 0.74546,7.09101 1.12685,9.85586c-1.42407,0.38442 -4.08235,1.14348 -4.63105,1.61418c-0.75588,0.64843 -0.75588,2.74252 -0.75588,2.74252l5.95994,-0.4471c0.14037,0.90266 0.22815,1.42935 0.22815,1.42935l0.00871,0.04753l0.04703,0l0.10972,0l0.04702,0l0.00871,-0.04753c0,0 0.08762,-0.5267 0.22815,-1.42935l5.96168,0.4471c0,0 0.00001,-2.09409 -0.75588,-2.74252c-0.54891,-0.47088 -3.20913,-1.23166 -4.63279,-1.61595c0.3806,-2.75636 0.81748,-6.27135 1.12511,-9.82239l14.39128,2.70204c0.38175,-0.77169 0.68959,-1.93416 -0.25776,-2.94849c-0.70275,-0.75242 -9.34652,-4.08865 -13.76777,-5.76318c0.05283,-1.84082 0.03341,-3.56158 -0.09057,-5.03618l0,-0.00352c-0.12288,-1.45912 -0.34764,-2.67766 -0.71233,-3.54522c-0.18247,-0.43408 -0.40003,-0.78178 -0.66531,-1.02449c-0.26541,-0.24283 -0.57997,-0.3767 -0.93353,-0.3767l-0.00001,0z"
          fill="#d4aaff" />
        <path stroke="#000" id="svg_21"
          d="m15.02999,5.22579c-0.25031,0 -0.473,0.0975 -0.6609,0.27434c-0.18774,0.1767 -0.34302,0.42991 -0.47224,0.74613c-0.2584,0.63235 -0.41736,1.52067 -0.5043,2.58451c-0.08678,1.06179 -0.1014,2.29815 -0.06535,3.62165c-3.09189,1.20355 -9.36283,3.68856 -9.86658,4.24341c-0.67069,0.73872 -0.45399,1.58533 -0.18372,2.14735l10.30923,-1.99095c0.21791,2.59455 0.52776,5.16431 0.79776,7.17792c-1.00818,0.27997 -2.89013,0.83278 -3.27858,1.17559c-0.53513,0.47224 -0.53513,1.99735 -0.53513,1.99735l4.21937,-0.32562c0.09938,0.6574 0.16152,1.04098 0.16152,1.04098l0.00617,0.03461l0.03329,0l0.07768,0l0.03329,0l0.00617,-0.03461c0,0 0.06203,-0.38359 0.16152,-1.04098l4.22061,0.32562c0,0 0,-1.5251 -0.53513,-1.99735c-0.3886,-0.34294 -2.27192,-0.89701 -3.27982,-1.17688c0.26944,-2.00743 0.57874,-4.56736 0.79653,-7.15355l10.1884,1.96787c0.27027,-0.56202 0.4882,-1.40863 -0.18249,-2.14735c-0.49752,-0.54798 -6.61692,-2.97772 -9.74698,-4.19726c0.0374,-1.34065 0.02365,-2.59386 -0.06412,-3.6678l0,-0.00256c-0.08699,-1.06267 -0.24611,-1.95012 -0.5043,-2.58194c-0.12918,-0.31613 -0.28321,-0.56936 -0.47101,-0.74613c-0.1879,-0.17685 -0.41059,-0.27434 -0.66089,-0.27434l0,0z"
          fill="#d4aaff" />
      </g>
    </svg>

样式：

2.小三角型

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                <path class="inner"
                      d="M25,30a5.82,5.82,0,0,1-1.09-.17l-.2-.07-7.36-3.48a.72.72,0,0,0-.35-.08.78.78,0,0,0-.33.07L8.24,29.54a.66.66,0,0,1-.2.06,5.17,5.17,0,0,1-1,.15,3.6,3.6,0,0,1-3.29-5L12.68,4.2a3.59,3.59,0,0,1,6.58,0l9,20.74A3.6,3.6,0,0,1,25,30Z"
                      fill="#F2F5F8"/>
                <path class="outer"
                      d="M16,3A2.59,2.59,0,0,1,18.34,4.6l9,20.74A2.59,2.59,0,0,1,25,29a5.42,5.42,0,0,1-.86-.15l-7.37-3.48a1.84,1.84,0,0,0-.77-.17,1.69,1.69,0,0,0-.73.16l-7.4,3.31a5.89,5.89,0,0,1-.79.12,2.59,2.59,0,0,1-2.37-3.62L13.6,4.6A2.58,2.58,0,0,1,16,3m0-2h0A4.58,4.58,0,0,0,11.76,3.8L2.84,24.33A4.58,4.58,0,0,0,7,30.75a6.08,6.08,0,0,0,1.21-.17,1.87,1.87,0,0,0,.4-.13L16,27.18l7.29,3.44a1.64,1.64,0,0,0,.39.14A6.37,6.37,0,0,0,25,31a4.59,4.59,0,0,0,4.21-6.41l-9-20.75A4.62,4.62,0,0,0,16,1Z"
                      fill="#111920"/>
            </svg>

样式：

二、鼠标样式的使用

1.HTML部分(可以更换自己的svg图标，但需要注意修改大小)

这里以小三角举例

  <div class="pointer">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path class="inner"
        d="M25,30a5.82,5.82,0,0,1-1.09-.17l-.2-.07-7.36-3.48a.72.72,0,0,0-.35-.08.78.78,0,0,0-.33.07L8.24,29.54a.66.66,0,0,1-.2.06,5.17,5.17,0,0,1-1,.15,3.6,3.6,0,0,1-3.29-5L12.68,4.2a3.59,3.59,0,0,1,6.58,0l9,20.74A3.6,3.6,0,0,1,25,30Z"
        fill="#F2F5F8" />
      <path class="outer"
        d="M16,3A2.59,2.59,0,0,1,18.34,4.6l9,20.74A2.59,2.59,0,0,1,25,29a5.42,5.42,0,0,1-.86-.15l-7.37-3.48a1.84,1.84,0,0,0-.77-.17,1.69,1.69,0,0,0-.73.16l-7.4,3.31a5.89,5.89,0,0,1-.79.12,2.59,2.59,0,0,1-2.37-3.62L13.6,4.6A2.58,2.58,0,0,1,16,3m0-2h0A4.58,4.58,0,0,0,11.76,3.8L2.84,24.33A4.58,4.58,0,0,0,7,30.75a6.08,6.08,0,0,0,1.21-.17,1.87,1.87,0,0,0,.4-.13L16,27.18l7.29,3.44a1.64,1.64,0,0,0,.39.14A6.37,6.37,0,0,0,25,31a4.59,4.59,0,0,0,4.21-6.41l-9-20.75A4.62,4.62,0,0,0,16,1Z"
        fill="#111920" />
    </svg>  </div>

2.CSS部分

简单的修改以下大小以及鼠标的隐藏

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  cursor: none;
}

.pointer {
  width: 32px;
  height: 32px;
  position: fixed;
  margin-left: -16px;
  transform-origin: center top;
}

3.JS部分

// 获取DOM元素
const pointer = document.querySelector('.pointer');

// 鼠标移动的相对角度
let rad = 0;

// 添加鼠标移动事件
window.onmousemove = (e) => {
  // 获取移动距离
  const x = e.clientX;
  const y = e.clientY;

  // 获取移动的相对距离
  const mx = e.movementX;
  const my = e.movementY;

  // 如果相对移动距离过小则不修改鼠标的角度
  if (Math.abs(mx) + Math.abs(my) < 5) return;

  // 否则修改
  rad = Math.atan2(mx, -my);
  pointer.style.transform = `translate(${x}px, ${y}px) rotate(${rad}rad)`;
};