动态改变 SVG 光标答案

【问题标题】：Dynamically change SVG cursor动态改变 SVG 光标
【发布时间】：2018-11-15 06:53:00
【问题描述】：

我已经创建了 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>')`;

【问题讨论】：

标签： javascript css svg

【解决方案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 可以；但是更大的半径会给你一个可爱的圆圈。你到底想如何在滚动上扩大你的圈子。页面也有不同的高度。是“滚动”还是“滚动”您计划使用的事件？

【讨论】：