Question

我有一个可拖动的svg。我想改变鼠标事件时光标的外观。

svg.addEventListener('mousedown', onMouseDown);
svg.addEventListener('mouseup', onMouseUp);

function onMouseDown(e) {
    // cursor = 'move'
}

function onMouseUp(e) {
    // cursor = 'regular'
}

尽管没有运气，我还是试图打电话给svg.setAttribute('cursor', 'move')。

我想知道是否存在一种以动态方式更改svg属性（例如光标外观）的方法？

Answer 1

您通过javascript设置了Manually Configuring secondary Elastic network interface on Red hat ami- 7.5规则：

function onMouseDown(e) {
  this.style.cursor = 'move'
}

function onMouseUp(e) {
  this.style.cursor = 'pointer'
}

Answer 2

使用这些事件侦听器（和一些辅助CSS类），您可以实现所需的结果：

const svg = document.getElementsByTagName('svg')[0];

svg.addEventListener('mousedown', onMouseDown);
svg.addEventListener('mouseup', onMouseUp);

function onMouseDown(e) {
    svg.classList.add('moving');
}

function onMouseUp(e) {
    svg.classList.remove('moving');
}

.moveable {
  cursor: pointer;
}

.moveable.moving {
  cursor: move;
}

<svg height="100" width="100" class="moveable">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

在SVG中的mouseDown / mouseUp函数中更改光标形状

2 个答案: