ionic 3在svg上悬停时改变颜色并保持不变

Question

我正在使用 Ionic 3 框架编写一个移动应用程序。

当用户用手指悬停在组件上方时，我想更改 SVG 的颜色。但是当他悬停在组件之外时，颜色需要保持不变。就像他会用手指画画一样。

我尝试了 CSS hover，但在离开组件后它又反转了。 我尝试了离子的手势事件，但似乎它们都没有帮助我。（https://ionicframework.com/docs/components/#gestures）。 我尝试了 Angular 的“鼠标悬停”事件。它在浏览器上运行良好，但在移动设备或移动模拟器上完全不能使用手指。

在点击事件中，我在 .html 文件中使用[style]=myVariable。在 Typescript 文件中，“myVariable”为白色的 fill=#ffffff 或黑色的 fill=#000000。

有人知道如何实现这一目标吗？

Answer 1

好的，我找到了解决方案。

这是纯网络。

这个想法是使用基本的网络事件“touchstart”和“touchmove”。 并使用该事件来获取手指的坐标。

然后使用函数“document.elementFromPoint(x, y)”获取手指下的元素。

应该可以直接访问“event.target”，但不幸的是，返回的元素始终是“touchstart”事件期间手指下的元素。

然后，我动态更改 CSS。

我们必须使用“DomSanitizer.bypassSecurityTrustStyle()”来执行此操作...如果您在 CSS 中使用来自用户的输入，则不能这样做。就我而言，可能的值位于硬编码数组中。

所以，阅读上面的代码。

变色svg.html

<svg id="colorChanginSVG" version="1.1" (touchstart)="handleMove($event) (touchmove)="handleMove($event)">
    <g transform="translate(-24.379463,-109.90178)">
    <path
        id="pixel"
        d="some-path"
        [style]=pixelColor />
      </g>
  </svg>

变色svg.ts

    @Component({
      selector: 'page-color-changing-svg',
      templateUrl: 'color-changing-svg.html',
    })
    export class ColorChanginSvgPage {
          possibleColors: Array<string> = ["#ffffff", "#000000"]

          currentFingerColor="#0000ff";
          pixelColor:string="fill="+"#ff0000" 

          constructor(public sanitizer: DomSanitizer) {
          }

          handleMove(ev) {
            let currentElement = document.elementFromPoint(ev.touches[0].pageX, ev.touches[0].pageY);
            let id = currentElement.id

            if (id === "pixel"){
              this.pixelColor = this.sanitizer.bypassSecurityTrustStyle("fill:" + this.currentFingerColor)
            }
          }
    }