Есть ли способ добавить собственный путь SVG, который будет действовать как курсор на веб-странице? - PullRequest
Новая
       7

Есть ли способ добавить собственный путь SVG, который будет действовать как курсор на веб-странице?

1 голос
/ 20 июня 2020

Я знаком с привязкой события 'mousemove' (показано ниже) к div и перемещением div по странице, скрывая при этом настоящий курсор, но есть ли способ сделать это дальше, чтобы изменить форму круга на путь SVG и перетащить путь SVG по странице вместо круга? 

  document.onmousemove = function(e) {
  document.getElementsByClassName('cursor')[0].style.setProperty('--x',(e.clientX)+'px');
  document.getElementsByClassName('cursor')[0].style.setProperty('--y',(e.clientY)+'px');
  }
  body {
  background-color: black;
  cursor: none;
  }
  .cursor {
  content:"";
  position:absolute;
  z-index:999;
  top:0;
  left:0;
  right:0;
  bottom:0; 
  background:
  radial-gradient(farthest-side ,#fff 95%,transparent 100%)
  calc(var(--x) - .75em) calc(var(--y) - .75em)/1.5em 1.5em  fixed no-repeat;
  mix-blend-mode:difference;
  pointer-events: none;
  cursor: none;
  }
  <body>
  <div class="cursor">
  </div>
  </body>

1 Ответ

1 голос
/ 20 июня 2020

У меня сработало. 

  document.onmousemove = function(e) {
  document.getElementsByClassName('cursor')[0].style.setProperty('--x',(e.clientX)+'px');
  document.getElementsByClassName('cursor')[0].style.setProperty('--y',(e.clientY)+'px');
  }
  body {
  background-color: black;
  cursor: none;
  }
  .cursor {
  content:"";
  position:absolute;
  top: var(--y);
  left: var(--x);
  pointer-events: none;
  cursor: none;
  }
  <body>
  <body>
    <svg width="3.5%" class="cursor" version="1.1" viewBox="0 0 60 210" xmlns="http://www.w3.org/2000/svg">
        <title>Sword</title>
        <desc>https://www.sololearn.com/Profile/8896242</desc>
        <defs>
            <linearGradient id="edge_grad">
                <stop offset="0%" stop-color="white" />
                <stop offset="10%" stop-color="grey" />
                <stop offset="100%" stop-color="black" />
            </linearGradient>
            <linearGradient id="dol_grad">
                 <stop offset="0%" stop-color="black" />
                 <stop offset="50%" stop-color="grey" />
                 <stop offset="100%" stop-color="black" />
            </linearGradient>
            <linearGradient id="gard_grad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="white" />
                <stop offset="20%" stop-color="grey" />
                <stop offset="100%" stop-color="black" />
            </linearGradient>
            <radialGradient id="ruby_grad">
                <stop offset="0%" stop-color="#900020" />
                <stop offset="50%" stop-color="#f50029" />
                <stop offset="100%" stop-color="#7b001c" />
            </linearGradient>
            <linearGradient id="handle_grad">
                <stop offset="0%" stop-color="#cc6600" />
                <stop offset="20%" stop-color="#753313" />
                <stop offset="100%" stop-color="#4d220e" />
            </linearGradient>
            <linearGradient id="pommel_grad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#5b6669" />
                <stop offset="20%" stop-color="#434b4d" />
                <stop offset="70%" stop-color="#23282b" />
                <stop offset="100%" stop-color="#000000" />
            </linearGradient>
        </defs>
        <g stroke="black">
            <path id="edge" fill="url(#edge_grad)" d="M20,150 v-130 l10,-20 l10,20 v130 l-10,-2.5 z" />
            <path id="dol" fill="url(#dol_grad)" d="M28,148 v-130 q2,-5 4,0 v130 l-2,-1 z" />
            <path id="gard" fill="url(#gard_grad)" d="M0,150 h20 l10,-2.5 l10,2.5 h20 l-25,10 q-5,1.5 -10,0 z" />
            <g id="ruby">
                <path fill="url(#ruby_grad)" d="M20,150 l10,-2.5 l10,2.5 l-5,10 q-5,1.5 -10,0 z" />
                <line x1="20" y1="150" x2="30" y2="154" />
                <line x1="30" y1="147.5" x2="30" y2="154" />
                <line x1="40" y1="150" x2="30" y2="154" />
                <line x1="25" y1="160" x2="30" y2="154" />
                <line x1="35" y1="160" x2="30" y2="154" />
            </g>
            <g id="handle">
                <path fill="url(#handle_grad)" d="M25,160 v30 q5,2.5 10,0 v-30 q-5,1.5 -10,0 z" />
                <line x1="25" y1="162" x2="30" y2="161" />
                <line x1="25" y1="165" x2="35" y2="162" />
                <line x1="25" y1="168" x2="35" y2="165" />
                <line x1="25" y1="171" x2="35" y2="168" />
                <line x1="25" y1="174" x2="35" y2="171" />
                <line x1="25" y1="177" x2="35" y2="174" />
                <line x1="25" y1="180" x2="35" y2="177" />
                <line x1="25" y1="183" x2="35" y2="180" />
                <line x1="25" y1="186" x2="35" y2="183" />
                <line x1="25" y1="189" x2="35" y2="186" />
                <line x1="27" y1="191" x2="35" y2="189" />
            </g>
            <g id="pommel">
                <path fill="url(#pommel_grad)" d="M25,190 l-5,13 l10,7 l10,-7 l-5,-13 q-5,2.5 -10,0 z" />
                <line x1="30" y1="191.5" x2="30" y2="210" />
                <line x1="20" y1="203" x2="40" y2="203" />
            </g>
        </g>
    </svg>
  </div>
  </body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...