Динамически менять SVG курсор

Question

Я создал курсор SVG, и я хотел бы динамически изменять радиус курсора при прокрутке мыши, увеличивать радиус увеличения, уменьшать радиус уменьшения.

Курсор CSS SVG, это работает:

.brushCursor {
    cursor: url('data:image/svg+xml;utf8,<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32"><circle cx="10" cy="10" r="5" stroke-width="2" style="stroke: black; fill: red;"/></svg>') 10 10, pointer;
}

Но я хочу динамически изменять радиус SVG.Радиус должен быть в диапазоне от 1 до 10. Пока я сделал это, но курсор не обновляется:

const brush = document.querySelector('.brush');
const radius = 5;

brush.style.cursor = `url('data:image/svg+xml;utf8,<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32"><circle cx="10" cy="10" r=${radius} stroke-width="2" style="stroke: black; fill: red;"/></svg>')`;

Answer 1

Я создаю новый <style> элемент s и добавляю к этому правило.

Для изменения радиуса используется input type='range'.

let r = 3;
let s = document.createElement("style");
document.head.appendChild(s);
changeCursor(r)

test.addEventListener("input", ()=>{
  r = test.value;
  changeCursor(r)
})

function changeCursor(r){
  let rule = `cursor: url('data:image/svg+xml;utf8,<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32"><circle cx="10" cy="10" r="${r}" stroke-width="2" style="stroke: black; fill: red;"/></svg>') 10 10, pointer;`
  
  s.textContent = `.brushCursor { ${rule} }`;
  
}

.brushCursor {
  height:100vh;
  /*cursor: url('data:image/svg+xml;utf8,<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32"><circle cx="10" cy="10" r="3" stroke-width="2" style="stroke: black; fill: red;"/></svg>') 10 10, pointer;*/
}
  #test{position:absolute; top:1em;}

<div class="brushCursor"></div>
<input id="test" type="range" min="2" max="7" value="3" />

Чтобы изменить его на свитке, мне нужно знать больше. Вход, который я использую, имеет максимум = 7. Может быть, 8 будет делать; однако больший радиус даст вам выбранный круг. Как именно вы хотите вырастить свой круг на свитке. Также страницы имеют разную высоту. Это «прокрутка» или «колесо» - событие, которое вы планируете использовать?