如何防止在 <svg> 中拖动 <image> 元素？

Question

我正在构建一个使用 SVG 元素作为 canvas 的编辑器。它提供自定义的拖放行为来在 svg 中拖动元素。但是，当我尝试拖动 <image> 标签时，您正在拖动图像“重影”的本机浏览器拖动行为会启动。如何停止它？

我尝试在 CSS 中设置 user-select: none，这会阻止选择文本但不会拖动图像。我尝试设置 HTML draggable="false" 属性，这在 SVG 中无效。我什至试图取消 ondragstart 事件，但它似乎根本没有触发。

<svg>
  <image draggable="false" style="user-select: none;" ondragstart="return false" href="https://wehles.files.wordpress.com/2020/05/opamp.png?w=147"></image>
</svg>

JSfiddle：https://jsfiddle.net/1dnfpray/

如何防止图片被拖动，从而实现自己的拖动行为？

Answer 1

如果取消 mousedown 事件，将阻止拖动：

<svg>
  <image draggable="false" style="user-select: none;" onmousedown="return false" href="https://wehles.files.wordpress.com/2020/05/opamp.png?w=147"></image>
</svg>

如果您想实现自己的拖动行为，无论如何您都需要处理该事件。

如何防止在 <svg> 中拖动 <image> 元素？

How to prevent dragging of an <image> element inside a <svg>?

html

javascript

css

svg