动态改变SVG光标 [英] Dynamically change SVG cursor

查看：27
本文介绍了动态改变SVG光标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经创建了 SVG 光标，我想在鼠标滚动时动态更改光标半径，放大增加半径，缩小减小半径.

I have created SVG cursor and I would like to dynamically change cursor radius on mouse scroll, zoom in increase radius, zoom out decrease radius.

CSS SVG 光标，这是有效的:

CSS SVG cursor, this works:

.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 的范围内.到目前为止，我做了这个，但光标没有更新:

But I want to change SVG's radius dynamically. Radius should be in the range 1 to 10. So far I made this but the cursor is not updating:

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>')`;

推荐答案

我正在创建一个新的