svg.filter.js + Angular 7.3: How use

Question

Tell me how to properly connect the svg.filter.js library in the Angular project

Tried to do something like that svg.js + Angular 7.3: Build in production mode get 'not a constructor'

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);
  }
}

But with this use, I get a new svg element at the end of the document.

<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>

Exactly the same question was answered just yesterday in the issue forum: https://github.com/svgdotjs/svg.filter.js/issues/32. You need to use `this.draw.defs().filter()` to create your filter instead of `new Filter()` — Fuzzyma, Apr 27 '19 at 11:08

score 2 · Answer 1 · answered May 02 '19 at 13:39

E.g

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

  }
}

This worked for me in Vue as well. I've seen so many examples that didn't work. The missing piece was `this.filter = this.draw.defs().filter()` — m.e.conroy, Mar 19 '21 at 13:44

svg.filter.js + Angular 7.3: How use

1 Answers1