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