Question

告诉我如何正确连接Angular项目中的svg.filter.js库

试图做类似的事情Getting java.lang.ClassNotFoundException: com.sun.xml.internal.ws.spi.ProviderImpl despite the dependencies are defined

import { Component, OnInit } from '@angular/core';
import SVG from "@svgdotjs/svg.js/src/svg"   //v 3.0.12
import Filter from '@svgdotjs/svg.filter.js/src/svg.filter';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'svgjs30';
  draw: any

  ngOnInit() {
    this.draw = SVG().addTo('#canvas').viewbox(0, 0, 300, 140)
    this.grayFilter = new Filter();
    this.grayFilter.colorMatrix('saturate', 1);
    this.draw.image(imagePath)
          .size(v.imageWidth, v.imageHeight)
          .move(v.compPosX, v.compPosY)
          .attr({id: 'obj' + v.compID}).filterWith(this.grayFilter);
  }
}

但是通过这种使用，我在文档末尾有了一个新的svg元素。

<svg id="SvgjsSvg1001" width="2" height="0" style="overflow: hidden; top: -100%; left: -100%; position: absolute; opacity: 0;"><defs id="SvgjsDefs1002"></defs><polyline id="SvgjsPolyline1003" points="0,0"></polyline><path id="SvgjsPath1004" d="M0 0 "></path></svg>

Answer 1

例如

import { Component, OnInit } from '@angular/core';
import { SVG, Svg } from "@svgdotjs/svg.js"   //v 3.0
import "@svgdotjs/svg.filter.js"  //3.0.2

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  draw: Svg
  filter: any

  ngOnInit() {
    this.draw = SVG().addTo('#canvas').viewbox(0, 0, 300, 140)
    .attr({ overflow: "visible" })
    let rect = this.draw.rect(90, 100).fill('#f06');

    this.filter = this.draw.defs().filter()

    this.filter.dropShadow(this.filter.$sourceAlpha, 10, 10).gaussianBlur(5)
    this.filter.blend(this.filter.$source, blur)
    this.filter.size('200%', '200%').move('-50%', '-50%')

    rect.filterWith(this.filter) //v3.0

  }
}

svg.filter.js + Angular 7.3：如何使用

1 个答案: