如何使 svg 图像不可拖动和可点击答案

【问题标题】：How to make svg image not draggable and clickable如何使 svg 图像不可拖动和可点击
【发布时间】：2020-04-24 01:59:03
【问题描述】：

我正在处理 svg 图像滑块，一切正常，直到我加载带有文本的图像。然后当我拖动鼠标时，我的文本被选中，这很正常。当我用 css 属性阻止它时：

  user-select: none
  -moz-user-select: none
  -webkit-user-drag: none
  -webkit-user-select: none
  -ms-user-select: none
  pointer-events: none

一切都恢复了，但是在这样做时，svg 元素中的每个 onclick 操作都会被阻止。我的问题是如何使元素可拖动并同时启用 onclick 操作。

编辑

我正在为我的问题提供示例代码，希望它能澄清一切。

document.getElementById('inspector-wrapper').addEventListener('mousedown', () => {
      const lastObjX = this.imgX; // getting img X,Y
      const lastObjY = this.imgY;
      this.lastX = this.currentX; // getting start X,Y
      this.lastY = this.currentY;
      console.log(this.currentX);
      this.interval = setInterval(() => { // when holding mouse1
        this.definePosition(lastObjX, lastObjY);
      }, 10);

      private definePosition(lastObjX: number, lastObjY: number) {
        const distanceToMoveX = this.currentX - this.lastX;
        if (distanceToMoveX !== 0) {
          this.imgX = lastObjX + distanceToMoveX; // setting new X
        }
        if (this.isYAvailable()) { // if Y available set new value
          const distanceToMoveY = this.currentY - this.lastY;
          if (distanceToMoveY !== 0) {
            this.imgY = lastObjY + distanceToMoveY;
          }
        }
        this.setImgXY();
      }

#inspector-wrapper
  position: absolute
  overflow: hidden
  background-color: transparent

\:host::ng-deep object
  position: absolute
  left: 0
  top: 0
  user-select: none
  -moz-user-select: none
  -webkit-user-drag: none
  -webkit-user-select: none
  -ms-user-select: none
  pointer-events: none

<div id="inspector-wrapper">
  <object data="../assets/main.svg" id="test" type="image/svg+xml"></object>
</div>

【问题讨论】：

尝试删除pointer-events: none这会禁用所有指针事件。
请提供minimal reproducible example 并明确说明您想要实现的目标。以目前的形式，不清楚您的问题是什么以及您为解决它而尝试了什么。
我添加了最少的代码示例，希望对您有所帮助。
看起来您正在使用pointer-events: none 为整个<object> 元素设置样式。尝试将其仅应用于 <text> 元素。
我试过了，看起来 svg 有问题。当所有事件都被禁用时，我可以移动图像，但如果我只在文本上禁用它，我就不起作用。我必须以某种方式使它工作。如果有人有线索，请发表评论。

标签： javascript html css typescript svg

【解决方案1】：

document.getElementsByTagName("img")[0].onclick = function() {
  console.log("Pointer events work");
}

img {
  user-select: none;
}

<img src="https://www.gravatar.com/avatar/4db6ced4189e044379de4d14c0208ddf?s=48&d=identicon&r=PG&f=1" draggable=false>
<!-- I needed a valid image, so I used my profile picture -->

这使用user-select: none 禁用选择，draggable=false 禁用拖放，并使用onclick 事件来证明指针事件仍然有效。

【讨论】：