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

Question

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

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

我尝试了 CSS hover，但它在离开组件后返回。我尝试了 ionic 的手势事件，但似乎没有一个对我有帮助。(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)
            }
          }
    }